jQuery的側邊欄菜單的問題onHover選項

我想創建就像我們使用的引導和jQuery的Android手機上看到的邊欄菜單欄jQuery的側邊欄菜單的問題onHover選項

我要的是，當我將鼠標懸停礦山其內部子的特定元素 - 項目應顯示。

這是我到現在爲止

完成的代碼如下

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Newspaper</title> 
<link rel="stylesheet" href="../css/bootstrap.min.css"/> 
<link rel="stylesheet" href="../css/font-awesome.min.css"> 
<script type="text/javascript" src="../js/jquery.js"></script> 


<!-- Latest compiled and minified JavaScript --> 
<script src="../js/bootstrap.min.js"></script> 
<style type="text/css"> 

    .mini-submenu{ 

    background:#000; 
    border: 1px solid rgba(0, 0, 0, 0.9); 
    border-radius: 4px; 
    padding: 9px; 
    /*position: relative;*/ 
    width: 42px; 


} 
.mini-submenu .icon-bar { 
    border-radius: 1px; 
    display: block; 
    height: 2px; 
    width: 22px; 
    margin-top: 3px; 
} 
.mini-submenu .icon-bar { 
    background-color: #fff; 
} 
</style> 
<script> 
var i=1; 
$(document).ready(function(){ 
    $('.myicon').click(function() 
    { 
     if(i==1) 
     { 

      $('.ic').hide(200); 
      $('#mylist').animate({width:"90px"},300); 
      $('.myicon').removeClass('fa-rotate-90'); 
      $('.myicon').addClass('fa-rotate-270'); 
      i--; 
     } 
     else 
     { 
      $('.ic').show(200); 
      $('#mylist').animate({width:"200px"},300); 
      $('.myicon').removeClass('fa-rotate-270'); 
      $('.myicon').addClass('fa-rotate-90'); 
      i++; 

     } 
    }); 
$('#mylist > a').hover(function(){ 

    $(this).children('div').show(1000); 



    }, 
    function(){ 



    }); 
}); 
</script> 
</head> 
<body> 
<a href="#" data-toggle="collapse" data-target="#mylist"> 
<div class="mini-submenu"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </div> 

</a> 
<div class="list-group col-md-3 collapse" id="mylist"> 
    <a class="list-group-item home" href="#" data-toggle="collapse" data-target="#toggleDemo1"><i class="fa fa-home fa-fw"></i><span class="ic">&nbsp; Home</span><i class="fa fa-shield fa-rotate-90 myicon" style="float:right;margin-top:5px;"></i></a> 
    <div class="collapse" id="toggleDemo1" style="height: 0px;"> 
      <ul class="nav nav-list"> 
       <li><a href="#" class="list-group-item ic">Submenu1.4</a></li> 
       <li><a href="#" class="list-group-item ic">Submenu1.5</a></li> 
       <li><a href="#" class="list-group-item ic">Submenu1.6</a></li> 
      </ul> 
      </div> 

    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i><span class="ic">&nbsp; Library</span></a> 

    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i><span class="ic">&nbsp; Applications</span></a> 
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw fa-spin"></i><span class="ic">&nbsp; Settings</span></a> 
    <a href="#" data-toggle="collapse" data-target="#toggleDemo" class="list-group-item"> 
    <i class="fa fa-home fa-fw"></i><span class="ic">Submenu 1</span> 
      </a> 
      <div class="collapse" id="toggleDemo" style="height: 0px;"> 
      <ul class="nav nav-list"> 
       <li><a href="#" class="list-group-item ic">Submenu1.1</a></li> 
       <li><a href="#" class="list-group-item ic">Submenu1.2</a></li> 
       <li><a href="#" class="list-group-item ic">Submenu1.3</a></li> 
      </ul> 
      </div> 

</div> 
</body> 
</html>

這裏是在JSFIDDLE

來源

2014-06-27 user3751572

您可以提供的結果JSFIDDLE鏈接，所以其他可以看到並幫助你的問題 – Kyojimaru

ohkk當然，給我一秒 – user3751572

這裏是jsfiddle鏈接http://jsfiddle.net/mGqhw/ – user3751572

的例子，你可以通過CSS做純粹的，這裏是如何：

包裝容器內的所有元素

<div id="container"> 
    <a href="#" data-toggle="collapse" data-target="#mylist"> 
     <!-- Button UI to hover --> 
    </a> 
    <div class="list-group"> 
     <!-- List Item that will slide --> 
    </div> 
</div>

然後應用CSS，您要被隱藏，並出現由左至右list-group，使用此

.list-group { 
    position: absolute; 
    width: 100%; 
    right: 100%; // this will make the element out of viewport in the left 
    -webkit-transition: all ease-in-out 0.5s; 
    -moz-transition: all ease-in-out 0.5s; 
    transition: all ease-in-out 0.5s; 
}

轉變被用於使其滑動，然後添加上懸停的CSS和使list-group出現

#container:hover .list-group { 
    right: 0; 
}

，也不要忘了添加

#container { 
    display: inline-block; 
}

因此容器（div元素）寬度的它不是100％的父，但是從它的內容，所以它不會觸發懸停按鈕之外，list-group

這裏的一對JSFIDDLE

來源

2014-06-27 14:53:09 Kyojimaru

這真的太棒了，非常感謝你，只是有一件事是在這裏丟失的是，當你點擊那個箭頭圖標時，列表項應該進入內部，只顯示圖標和時間我將鼠標懸停在圖標上應該顯示右側的子菜單，並且點擊應該被禁用，只需在這裏查看http://mymenu.netne.net/html/ – user3751572

jQuery的側邊欄菜單的問題onHover選項

回答

相關問題