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

JQuery hover dropdown menu disappears when hovering on the dropdown menu

本文关键字：悬停 下拉菜单 JQuery 消失 鼠标      更新时间：2023-09-26

我正在做一些与我所看到的工作略有不同的事情，很多人都这样做了，所以下拉菜单是子列表的一部分。但是，我正在尝试使用同级下拉菜单。

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

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

我该如何防止这种情况？

我见过它的工作原理是这样的：

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

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

试试这个

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

例

相关文章：