1

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

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

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

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

4

1 回答 1

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);
});

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

于 2011-10-27T20:10:42.407 回答