当鼠标悬停在下拉菜单上时，JQuery悬停下拉菜单消失

我正在做一些与我见过的工作略有不同的事情，很多人都这样做，所以下拉列表是儿童列表的一部分。不过，我正在尝试使用兄弟的下拉菜单。当鼠标悬停在下拉菜单上时，JQuery悬停下拉菜单消失

什么，你会发现是，如果你将鼠标悬停在按钮上，出现下拉菜单。如果你离开按钮，它会消失，这是完美的。但是，如果您将鼠标悬停在下拉菜单上，它仍会消失，这不是我想要的功能。

我该如何预防？

我已经看到了这样的工作：

if($('#menuONE').has(e.target).length === 0) { 
     // toggle menu to close 
    }

但是我不知道怎样才能以及附加至子菜单的按钮。

来源

2014-12-04 mdixon18

试试这个

var isSiblingHovered = false; 
$('.dropdown-hover-toggle').hover(function() { 
    $(this).siblings('.dropdown-menu').slideDown(); 
}, 
function() { 
    var current = $(this); 
    setTimeout(function(){ 
     if(!isSiblingHovered){ 
      current.siblings('.dropdown-menu').stop().slideUp(); 
     } 
    }, 50); 
}); 

$('body').on("mouseleave", ".dropdown-menu", function() { 
    isSiblingHovered = false; 
    $('.dropdown-menu').stop().slideUp(); 
}); 

$('body').on("mouseenter", ".dropdown-menu", function() { 
    isSiblingHovered = true; 
});

EXAMPLE

来源

2014-12-05 00:03:32

如果将鼠标悬停在按钮上而不是菜单上，则菜单保持打开状态，直到您将鼠标悬停在菜单上，然后离开。这不起作用。 – mdixon18 2014-12-05 00:06:22

在小提琴中工作，我在我的项目中有相同版本的JQuery，但我得到这个问题：未捕获的错误：语法错误，无法识别的表达式：不支持伪：悬停 – mdixon18 2014-12-05 00:26:49

不错，但我们可以改进它来处理多个工作，尝试切换这两个之间：http://jsfiddle.net/58m99wf8/6/ – mdixon18 2014-12-05 00:37:23

你可以做的是将菜单添加到选择器。我也定义了菜单，因为现在可以引用按钮或菜单，所以从那里遍历可能会有问题。

var menu = $('.dropdown-menu'); 

$('.dropdown-hover-toggle, .dropdown-menu').hover(

function() { 
    //show its sibling menu 
    menu.stop().slideDown(); 
}, 

function() { 
    //hide its sibling menu 
    menu.stop().slideUp(); 
});

http://jsfiddle.net/58m99wf8/1/

来源

2014-12-04 23:53:43 Kolby

，如果你有多个菜单，这将是一个可怕的做法。有没有办法从悬停功能中定位$（this），但只能指定.dropdown-menu的这个实例？ – mdixon18 2014-12-04 23:58:18

当鼠标悬停在下拉菜单上时，JQuery悬停下拉菜单消失

回答

相关问题