将鼠标悬停在菜单上时，保持Jquery slideDown菜单处于打开状态? [英] Keep Jquery slideDown menu open when hovering over that menu?

问题描述

我的Jquery slideDown菜单遇到一些困难.当我将鼠标悬停在触发slideDown事件的按钮上时，它会完美工作，但是当我将鼠标悬停在向下滑动的子菜单上时，它将触发slideUp事件并关闭菜单.

having some difficulties with my Jquery slideDown menu. It works perfectly when I hover over the button that triggers the slideDown event, but when I hover over the sub-menu that slid down, it triggers the slideUp event and closes the menu.

我正在寻找一种方法来更改代码，以至于当我将鼠标悬停在初始按钮上以触发子菜单slideDown之后，如果我将鼠标悬停在子菜单上，则该子菜单保持打开状态，直到我不再将鼠标悬停在初始按钮或子菜单上.我希望这已经足够清楚了.

I'm looking for a way to alter my code to say that after I hover over the initial button to trigger the sub-menu slideDown, that sub-menu stays open if I'm hovering on the sub-menu until I am no longer hovering on the initial button or the sub-menu.. I hope that's clear enough.

这是我到目前为止拥有的Jquery，除了子菜单之外，它都能正常工作！

Here's the Jquery I have so far, which works fine except for the sub-menu!

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

menu.hide();

$('#mainbutton').hover(

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

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

);

});

有什么建议吗?我敢肯定这很简单，我只是无法正确表达我的问题以找到其他人的解决方案u_u

Any suggestions? I'm sure it's something pretty easy, I've just not been able to phrase my question correctly enough to find someone else's solution u_u

感谢您提供的任何帮助！

Thanks for any help you may provide!

这是jsfiddle- http://jsfiddle.net/mXXEP/

edit: here's the jsfiddle -- http://jsfiddle.net/mXXEP/

推荐答案

(开箱即用)解决并不是一个特别容易的问题，因为存在多个依赖于彼此状态的元素才能正常工作.我之前已经使用setTimeout完成了此操作.

It's not a particularly easy problem to solve (out of the box) as there are multiple elements that rely on each other's state to work properly. I have done this before with setTimeout.

使用 setTimeout 来控制对变量的控制，该变量告诉每个悬停事件去做.只需将jsFiddle放在一起即可完成您想要的操作(尽管我认为mo的slideup部分存在问题):

Use setTimeout to maintain control of a variable that tells each of the hover events what to do. Just threw a jsFiddle together that does what you want (though I think there's a problem with the slideup part at the mo):

http://jsfiddle.net/3vL3a/

还有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:

<div id="mainbutton">Hover over me!</div>
<div class="menu" style="background-color:red;">Test menu text
    <br/>Test menu text
    <br/>Test menu text
    <br/>Test menu text
    <br/>Test menu text
    <br/>
</div>

这篇关于将鼠标悬停在菜单上时，保持Jquery slideDown菜单处于打开状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！