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/