当鼠标悬停在下拉菜单上时,JQuery悬停下拉菜单消失
问题描述:
我正在做一些与我见过的工作略有不同的事情,很多人都这样做,所以下拉列表是儿童列表的一部分。不过,我正在尝试使用兄弟的下拉菜单。当鼠标悬停在下拉菜单上时,JQuery悬停下拉菜单消失
这里是我的小提琴:http://jsfiddle.net/58m99wf8/
什么,你会发现是,如果你将鼠标悬停在按钮上,出现下拉菜单。如果你离开按钮,它会消失,这是完美的。但是,如果您将鼠标悬停在下拉菜单上,它仍会消失,这不是我想要的功能。
我该如何预防?
我已经看到了这样的工作:
if($('#menuONE').has(e.target).length === 0) {
// toggle menu to close
}
但是我不知道怎样才能以及附加至子菜单的按钮。
答
试试这个
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;
});
答
你可以做的是将菜单添加到选择器。 我也定义了菜单,因为现在可以引用按钮或菜单,所以从那里遍历可能会有问题。
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();
});
+0
,如果你有多个菜单,这将是一个可怕的做法。有没有办法从悬停功能中定位$(this),但只能指定.dropdown-menu的这个实例? – mdixon18 2014-12-04 23:58:18
如果将鼠标悬停在按钮上而不是菜单上,则菜单保持打开状态,直到您将鼠标悬停在菜单上,然后离开。这不起作用。 – 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