jQuery $.hover 用于导致“弹跳”的子菜单

Question

我在使用 jQuery 悬停方法时遇到了一些问题。

以下是相关的 JavaScript 代码：

$("#navigation > li > ul").hide();
$("#navigation > li").hover(
    function() {
        $(this).children("ul").slideDown(125);
    },
    function() {
        $(this).children("ul").slideUp(125);
    }
);

这是相应的 HTML：

<ul id="navigation">
    <li><a href="#">Top Level Item #1</a></li>
    <li>
        <a href="#">Top Level Item #2</a>
        <ul>
            <li><a href="#">Sub-Menu Item #2-1</a></li>
            <li><a href="#">Sub-Menu Item #2-2</a></li>
            <li><a href="#">Sub-Menu Item #2-3</a></li>
        </ul>
    </li>
</ul>

当您将鼠标悬停在顶级项目上时，其中的子菜单（如果有）将下拉，并带有漂亮、快速的滑动效果。问题是当您将鼠标快速“移入”菜单并将鼠标保持在菜单将在但尚未到达的位置时：然后菜单将点击鼠标悬停动画的“结束”并弹跳回到隐藏状态，然后重复，直到您将鼠标从下拉菜单所在的位置移开。

Answer 1

也许在mouseout 函数中添加检查可能会有所帮助：

if( !$(this).children("ul").is(":animated") ){
  $(this).children("ul").slideUp(125);
}

Answer 2

您可以尝试使用 hoventIntent，这是一个 jQuery 插件，可帮助检测用户悬停在元素上的意图。

http://cherne.net/brian/resources/jquery.hoverIntent.html

我用它修改了你的例子，它似乎表现得更好。我补充说：

<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script>

并用 hover() 将单行修改为：

$("#navigation > li").hoverIntent(

我无法让它反弹，感觉更像是一个应用了 hoverIntent 行为的弹出菜单。

最后，您可以尝试使用其中一个预先构建的 jQuery 菜单插件，因为它们已经为您完成了所有这些艰苦的工作:)