Question

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

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

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

有什么想法吗？您可以在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);
});

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

悬停时，Jquery下拉列表消失

1 个答案: