悬停时,Jquery下拉列表消失

时间:2011-10-27 20:06:44

标签: jquery drop-down-menu nav

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

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

当您将鼠标悬停在下拉列表(#dropdown)上时,下拉菜单会退出(因为我在菜单项上徘徊)我需要jquery才能工作,因此它会允许将鼠标悬停在下拉列表上,并且会褪色将鼠标悬停在下拉菜单和导航菜单后。

有什么想法吗?您可以在http://pixelcakecreative.com/cimlife/

看到一个有效的示例

1 个答案:

答案 0 :(得分:0)

如果您将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);
});

以上是上述解决方案的一个方面:http://jsfiddle.net/jasper/kED9T/2/