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/

jQuery下拉菜单不会停留

1 个答案: