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

我正在做一些和我所看到的略有不同的工作，很多人都做过，所以下拉列表是儿童列表的一部分。然而，我正在尝试使用兄弟姐妹下拉菜单

这是我的小提琴：

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

我怎样才能防止这种情况

我见过它是这样工作的：

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

---

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

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

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();
});

试试这个

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;
});

---

如果您有多个菜单，这将是一个糟糕的方法。有没有办法从hover函数中以$（this）为目标，但只指定.dropdown菜单的这个实例？如果您将鼠标悬停在按钮上而不是菜单上，那么菜单将保持打开状态，直到您将鼠标悬停在菜单上然后离开。这不起作用。在小提琴中工作，我在我的项目中有相同版本的JQuery，但我遇到了以下问题：未捕获错误：语法错误，无法识别的表达式：不受支持的pseudo:hoverNice但我们可以改进它以处理多个，尝试在这两个之间切换：