Question

我是jQuery的新手......在让代码按照我的意愿工作时遇到一些问题。

我在这个论坛上查看了类似的问题，但无法获得任何建议的解决方案。

我已经设置了一个水平下拉菜单。当顶层链接悬停在上面时（子菜单按预期动画显示），它可以正常工作。但是当鼠标离开链接时，我无法让子菜单淡出。

希望有人能指出我正确的方向。

这是我的代码，到目前为止（HTML和jQuery，我不会显示CSS，因为它有一大堆卡车，但它都非常标准）：

HTML：

<div id="nav-container">
    <nav id="menu-wrap">    
            <ul id="menu">
                <li><a href="/">Home</a></li>
                <li>
                    <a href="">Categories</a>
                    <ul>
                        <li>
                            <a href="">CSS</a>
                            <ul>
                                <li><a href="">Item 11</a></li>

                                <li><a href="">Item 12</a></li>
                                <li><a href="">Item 13</a></li>
                                <li><a href="">Item 14</a></li>
                            </ul>               
                        </li>
                        <li>
                            <a href="">Graphic design</a>

                            <ul>
                                <li><a href="">Item 21</a></li>
                                <li><a href="">Item 22</a></li>
                                <li><a href="">Item 23</a></li>
                                <li><a href="">Item 24</a></li>
                            </ul>               
                        </li>
              </ul>
           </ul>
    </nav>
</div>

的jQuery

$('#menu>li').hover(function(){
    $(this).closest('li').find('>ul').css({'opacity':0,'margin-    top':20}).show().animate({'margin-top':1,'opacity':1},300);
},function(){
 $(this).find('>ul').fadeOut("slow");

.});

感谢所有回复建议答案的人。我已经检查了所有这些并且一切正常。

然而，问题仍然存在，我认为它与我的CSS有关。在CSS中，嵌套标签（在下拉菜单中）的display属性设置为none：

#nav li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0; margin: 0;
}

发生了什么（我认为）是当鼠标从菜单移开时，CSS启动，覆盖jQuery，嵌套标签立即重置为display：none。 fadeOut（＆＃34;慢＆＃34;）功能没有机会发生。

$('#menu>li').hover(function(){
   $(this).closest('li').find('>ul').css({'opacity':0,'margin-        top':20}).show().animate({'margin-top':1,'opacity':1},300);
   },function(){
   $(this).find('>ul').fadeOut("slow");

 });

任何人都可以告诉我如何将子菜单设置为在页面加载时不可见，但是当用户将鼠标悬停在菜单上时也会完全响应jQuery，以便子菜单生动并且也淡出??

Answer 1

$('#menu >li').hover(function(){
    $(this).closest('li').find('>ul').css({'opacity':0,'margin-    top':20}).show().animate({'margin-top':1,'opacity':1},300);
},function(){
 $(this).find('>ul').fadeOut("slow");

});

演示：

http://jsfiddle.net/S93Ng/1/

Answer 2

检查出来

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<div id="nav-container">
    <nav id="menu-wrap">    
            <ul id="menu">
                <li><a href="/">Home</a></li>
                <li>
                    <a href="">Categories</a>
                    <ul id="submenu">
                        <li >
                            <a href="">CSS</a>
                            <ul>
                                <li><a href="">Item 11</a></li>

                                <li><a href="">Item 12</a></li>
                                <li><a href="">Item 13</a></li>
                                <li><a href="">Item 14</a></li>
                            </ul>               
                        </li>
                        <li>
                            <a href="">Graphic design</a>

                            <ul>
                                <li><a href="">Item 21</a></li>
                                <li><a href="">Item 22</a></li>
                                <li><a href="">Item 23</a></li>
                                <li><a href="">Item 24</a></li>
                            </ul>               
                        </li>
              </ul>
           </ul>
    </nav>
</div>
<script>            
$('#menu>li').hover(function(){
    $(this).closest('li').find('>ul').css({'opacity':0,'margin-    top':20}).show().animate({'margin-top':1,'opacity':1},300);
},function(){
 $(this).find('>ul').fadeOut("slow");

});
$('#submenu>li').hover(function(){
    $(this).closest('li').find('>ul').css({'opacity':0,'margin-    top':20}).show().animate({'margin-top':1,'opacity':1},300);
},function(){
 $(this).find('>ul').fadeOut("slow");

});
</script>

Answer 3

你在找这个吗？

$("a").click(function(e){
e.preventDefault();

$(this).parent().children(":not(a)").slideToggle();
 });

Demo

jQuery淡入/淡出下拉菜单

3 个答案: