jquery - Jquery下拉菜单在悬停时消失

Question

我设置了一个典型的导航栏，当您将鼠标悬停在一个元素（“我们的团队”）上时，会出现一个下拉列表（使用下面的 jquery）：

$("li#menu-item-20").hover(function(){
            $("#dropdown").stop().fadeIn(500);
        }, function(){
            $("#dropdown").stop().fadeOut(500);
        });

然后，当您将鼠标悬停在下拉菜单 ( #dropdown) 上时，下拉菜单会淡出（因为我将鼠标悬停在菜单项之外）导航菜单。

有任何想法吗？您可以在http://pixelcakecreative.com/cimlife/看到一个工作示例

Answer 1

如果将mouseleave事件绑定到#dropdown元素，则下拉菜单将一直保留，直到用户将鼠标移出下拉菜单：

//Note: no need for the `li` here as there will only be 1 element with this id on the document
$('#menu-item-20').bind('mouseenter', function () {
    $("#dropdown").stop(true, true).fadeIn(500);
});
$('#menu-nav').children('.menu-item').not('#menu-item-20').bind('mouseenter', function () {
    $("#dropdown").stop(true, true).fadeOut(500);
});
$('#dropdown').bind('mouseleave', function () {
    $("#dropdown").stop(true, true).fadeOut(500);
});

这是上述解决方案的 jsfiddle：http: //jsfiddle.net/jasper/kED9T/2/