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选项

回答

相关问题