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

I'm doing something slightly different to what i've seen work, many people have done it so there dropdown is part of a child list. However i'm trying to work with a sibling dropdown menu.

我正在做一些与我所看到的工作略有不同的事情，很多人都这样做，因此下拉列表是儿童名单的一部分。但是，我正在尝试使用兄弟下拉菜单。

Here is my fiddle: http://jsfiddle.net/58m99wf8/

这是我的小提琴：http：//jsfiddle.net/58m99wf8/

What you'll notice is that if you hover on the button, the dropdown menu appears. If you leave the button it disappears which is perfect. However if you hover on the dropdown menu it still disappears and this isn't what I want it to do.

您会注意到，如果您将鼠标悬停在按钮上，则会出现下拉菜单。如果你离开按钮就会消失，这是完美的。但是，如果您将鼠标悬停在下拉菜单上，它仍会消失，这不是我想要它做的。

How can i prevent this?

我怎么能阻止这个？

I've seen it work like this:

我看到它的工作方式如下：

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

However i don't see how i can attach this to the submenu as well as the button.

但是，我不知道如何将其附加到子菜单以及按钮。

2 个解决方案

#1

Try this

尝试这个

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

例

#2

What you can do is add the menu to the selector. I also defined menu because this can refer to the button or the menu now, so traversing from there could be problematic.

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

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/

#1