将鼠标悬停在Jquery下滑动菜单上时，是否保持该菜单打开？

我的Jquery向下滑动菜单有一些问题。当我将鼠标悬停在触发slideDown事件的按钮上时，它可以很好地工作，但当我将鼠标悬停在向下滑动的子菜单上时，它会触发slideUp事件并关闭菜单

我正在寻找一种方法来改变我的代码，在我将鼠标悬停在初始按钮上以触发子菜单向下滑动后，如果我将鼠标悬停在子菜单上，子菜单将保持打开状态，直到我不再将鼠标悬停在初始按钮或子菜单上。。我希望这足够清楚

这是我到目前为止使用的Jquery，除了子菜单外，它运行良好

$(document).ready(function () {
var menu = $('.menu')

menu.hide();

$('#mainbutton').hover(

    function () {
        $('.menu').stop(true, true).slideDown(400);
    },

    function () {
        $('.menu').stop(true, true).slideUp(400);
    }

);

});

有什么建议吗？我相信这很简单，我只是无法正确地表达我的问题，以找到其他人的解决方案

感谢您提供的任何帮助

---

编辑：这里是JSFIDLE--

这不是一个特别容易解决的问题（开箱即用），因为有多个元素依赖于彼此的状态才能正常工作。我以前用setTimeout做过这个

用于维护变量的控制，该变量告诉每个悬停事件要执行的操作。只需将一个JSFIDLE放在一起即可（尽管我认为mo中的slideup部分存在问题）：

以及JS/HTML：

$(document).ready(function () {
    var menu = $('.menu')
    var timeout = 0;
    var hovering = false;
    menu.hide();

    $('#mainbutton')
        .on("mouseenter", function () {
        hovering = true;
        // Open the menu
        $('.menu')
            .stop(true, true)
            .slideDown(400);

        if (timeout > 0) {
            clearTimeout(timeout);
        }
    })
        .on("mouseleave", function () {
        resetHover();
    });

    $(".menu")
        .on("mouseenter", function () {
        // reset flag
        hovering = true;
        // reset timeout
        startTimeout();
    })
        .on("mouseleave", function () {
        // The timeout is needed incase you go back to the main menu
        resetHover();
    });

    function startTimeout() {
        // This method gives you 1 second to get your mouse to the sub-menu
        timeout = setTimeout(function () {
            closeMenu();
        }, 1000);
    };

    function closeMenu() {
        // Only close if not hovering
        if (!hovering) {
            $('.menu').stop(true, true).slideUp(400);
        }
    };

    function resetHover() {
        // Allow the menu to close if the flag isn't set by another event
        hovering = false;
        // Set the timeout
        startTimeout();
    };
});

HTML:

悬停在我身上！
测试菜单文本

测试菜单文本

测试菜单文本

测试菜单文本

测试菜单文本

执行此操作的简单方法是检查鼠标是否删除

.menu div

，如下所示：

$(document).ready(function () {
var menu = $('.menu')
menu.hide();

$('#mainbutton').mouseover(
    function () {
        menu.stop(true, true).slideDown(400);
    }
);

$(".menu").mouseleave(       
    function () {
        menu.stop(true, true).slideUp(400)
    })
});

---

这并不是真正的菜单功能-当鼠标离开主按钮时，它不会消失（除非从子菜单中离开鼠标）。我通过添加一个功能修复了它，如果鼠标进入它下面的div，它也会向上滑动：-）这帮助我的下拉菜单在悬停在子菜单上时不停地反弹。美好的有一个小问题，如果我去主按钮，然后快速通过子菜单，它只是跳回而不是滑动，然而。我会努力修复自己的，再次谢谢是的，我注意到。。。它真的不需要太多来修复：）我需要做什么来修复这个问题？

$(document).ready(function () {
var menu = $('.menu')
menu.hide();

$('#mainbutton').mouseover(
    function () {
        menu.stop(true, true).slideDown(400);
    }
);

$(".menu").mouseleave(       
    function () {
        menu.stop(true, true).slideUp(400)
    })
});