javascript - 鼠标悬停在侧边栏时如何显示子菜单栏？

鼠标悬停时如何在边栏上显示子菜单栏，鼠标离开时如何关闭？谁能帮我解决这个问题？我是使用jquery的新手。

JS代码不起作用

$(function(){
    $('.nav').hover(function(){
        $(this).animate({width:'200px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

的HTML

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="border-radius: 2px 2px 2px 2px;">
   <ul class="nav">
     <li><a href="#" data-toggle="collapse" data-target="#sub1">Setting <span class="caret"></span></a>
        <ul class="nav collapse" id="sub1" style="font-weight:bold">
          <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Add Account</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Update User</a></li>
        </ul
     </li>

     <li><a href="#" data-toggle="collapse" data-target="#sub2"><strong style="font-size:14px; color:#FFCC33;">Documents in Process</strong></a>
        <ul class="nav collapse" id="sub2" style="font-weight:bold">
           <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Incoming Products</a></li>
           <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Document Validation</a></li>
        </ul>
     </li>
   </ul>
</div>

最佳答案

CSS：

.nav{
    width:35px;
    -webkit-transition:width 500ms ease-out;
    transition:width 500ms ease-out;
}
.nav:hover{
    width:200px;
}

  see css transitions
  
  see css pseudoclass :hover


timotheus的问候

关于javascript - 鼠标悬停在侧边栏时如何显示子菜单栏？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30529535/