Question

鼠标悬停时如何显示侧栏上的子菜单栏？鼠标离开时如何显示？任何人都可以帮我解决这个问题吗？我是使用jquery的新手。

JS CODE无效

$(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>

Answer 1

的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

Answer 2

使用纯CSS可以达到同样的效果。

setState

DEMO

Answer 3

您的选择器错误

您正在选择

#nav

这会选择id="nav"

的元素

尝试使用

#sidebar > .nav

选择具有class="nav"的元素（但只有侧边栏的直接子节点）。

或者，使用CSS

像这样。

ul.nav li ul {
  height: 0px;
  transition: height 500ms;
  background-color: red;
  overflow: hidden;
}

ul.nav li:hover ul {
  height: 200px;
}

Answer 4

当然你可以用CSS实现它，但是如果你想让你的javascript工作：

$('#sidebar > .nav > li').hover(function () {
    $(this).find('.nav').show(500);
}, function () {
    $(this).find('.nav').hide(500);
});

jsfiddle DEMO

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

4 个答案:

您的选择器错误

或者，使用CSS