0

我正在尝试创建一个下拉菜单，即使它悬停在下拉 div（'#units-menu-links'）上，它也会在悬停时保持打开状态。当用户仍将鼠标悬停在“units-menu-links”div 上时，我无法让它保持打开状态。目前它什么都不做，但在我在第二个函数中使用 .toggle 之前，只要用户没有将鼠标悬停在“#units-nav”div 上，它就会消失。

这是我的 HTML 的样子：

<div id="units-menu-links">
    <center>
            <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
    </center>
</div>

<div id="menu">
        <div id="menu-inside">
                <div class="bar">
                        <div class="nav-block" id="units-nav">
                                <a href="/link/">Menu Button</a>
                        </div>
                </div>
        </div>
</div>

这是我的jQuery：

$('#units-menu-links').hide();
    $("#units-nav").hover(
            function () {
                // Over the hover.
                $('#units-menu-links').toggle();
            },
            function () {
                // PLEASE READ THE FOLLOWING COMMENTS TO UNDERSTAND THE FUNCTIONALITY I AM TRYING TO GET.
                // When the users leaves #units-nav and #units-menu-links
                // then do the "$('#units-menu-links').toggle();" again to hide this.
                // However if the user is hovering over "$('#units-menu-links').toggle();" then don't do anything.
            }
    );

（我在 SO 以及在 Google 上查看了很多问题和答案，但找不到任何可以帮助我解决这个问题的东西。这似乎是一个非常普遍的问题，但人们已经创建了他们的HTML 结构与我的不同，因此很难找到资源。）

4

3 回答 3

1

当鼠标移出子菜单时尝试隐藏菜单：

$('#units-menu-links').hide();
$("#units-nav").hover(
    function () {
        $('#units-menu-links').show();
    },
    function () {
    }
);
$("#units-menu-links").hover(
    function () {
    },
    function () {
        $('#units-menu-links').hide();
    }
);

​

理想情况下，我建议不要使用 JavaScript。

HTML：

<div id="menu" style="background-color: red">
    <div id="menu-inside">
        <div class="bar">
            <div class="nav-block" id="units-nav">
                <a href="/link/">Menu Button</a>
            </div>
        </div>
    </div>
    <div id="units-menu-links" style="background-color: green">
        <center>
            <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
        </center>
    </div>
</div>

​CSS：

#menu #units-menu-links {
    display: none;
}

#menu:hover #units-menu-links {
    display: block;
}
​

这是小提琴。

于 2012-07-27T07:35:44.083 回答
1 
$('#units-menu-links').hide();
var timeOut;
$("#units-nav").hover(
    function () {
        // Over the hover.
        $('#units-menu-links').show();
        clearTimeout(timeOut);
    },
    function () {
        timeOut = setTimeout(function(){
            $('#units-menu-links').hide();
        }, 100);
    }
);

$('#units-menu-links').hover(
    function () {
        clearTimeout(timeOut);
    },
    function () {
        timeOut = setTimeout(function(){
            $('#units-menu-links').hide();
        }, 100);
    }
)
于 2012-07-27T07:55:01.730 回答
0

使用悬停时，您应该将子菜单嵌套在#units-nav元素下。然后它将起作用。如果不可能这样做，您可以对悬停函数的第二个回调实现一些超时，如果用户将悬停，您可以停止超时#units-menu-links-element..但这有点糟糕，用户可能会对这种行为感到困惑。

于 2012-07-27T07:35:48.823 回答