Question

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

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

我该如何防止这种情况？

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

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

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

Answer 1

您可以做的是将菜单添加到选择器。我也定义了菜单，因为现在可以参考按钮或菜单，因此从那里移动可能会有问题。

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/

Answer 2

试试这个

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

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

2 个答案: