jQuery 下拉菜单不会一直向下

Question

我在一个基于 Wordpress 的网站中创建了一个下拉菜单。它有效，但有一个问题；当鼠标悬停在菜单项上时，下拉菜单会不断上下滑动。

HTML

<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-20"><a href="http://s386670101.websitehome.co.uk/us/?page_id=10">Art Services</a>
<ul class="sub-menu">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://s386670101.websitehome.co.uk/us/?page_id=86">Home</a></li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://s386670101.websitehome.co.uk/us/?page_id=88">Business</a></li>
</ul>
</li>
</ul></div>     
</nav>

jQuery

$(document).ready(function() {
$(".menu-item").hover(function() { //When trigger is clicked...

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click

    $(this).hover(function() {
    }, function(){  
        $(this).find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() { 
        $(this).addClass("subhover").css('display','block'); //On hover over, add class "subhover"
    }, function(){  //On Hover Out
        $(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
 });

谢谢！

Answer 1

".sub-menu" 列表嵌套在'menu-item' 中，对吗？所以你不需要触发另一个hover() 事件。您可以将其修剪为：

$(document).ready(function () {
    $(".menu-item").hover(function () {
        //HOVER IN
        $(this).addClass("subhover");
        $(this).find(".sub-menu").stop().slideDown('fast');
    }, function () {
        //HOVER OUT
        $(this).removeClass("subhover");
        $(this).find(".sub-menu").stop().slideUp('slow');
    });
});

并添加stop() 以在用户悬停进出时停止额外的运行动画。

在此处查看演示：jsfiddle.net/AbkXM/