Jquery下拉菜单在悬停时消失答案

【问题标题】：Jquery dropdown disappears on hoverJquery下拉菜单在悬停时消失
【发布时间】：2011-10-27 20:06:44
【问题描述】：

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

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

然后，当您将鼠标悬停在下拉菜单 (#dropdown) 上时，下拉菜单会淡出（因为我将鼠标悬停在菜单项之外）我需要 jquery 才能工作，以便将鼠标悬停在下拉菜单上，并在您将鼠标悬停在下拉菜单和导航菜单上。

有什么想法吗？你可以在http://pixelcakecreative.com/cimlife/看到一个工作示例

【问题讨论】：

标签： jquery drop-down-menu nav

【解决方案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/

【讨论】：

唯一的问题是，如果您将鼠标悬停在下拉菜单上，然后将鼠标悬停在不同的导航项上，下拉菜单仍然存在。
我更新了答案和 jsfiddle 以包含一个事件处理程序，用于将鼠标悬停在另一个 .menu-items 上。