jQuery 帮助跳转滑动菜单

Question

我用 jQuery 编写了这段代码，以获得一个简单的悬停滑动菜单。它有效，但有时非常不稳定。当您在某个位置或稍快地将鼠标滑过它时，它会跳开/关闭并闪烁......不知道如何解决这个问题？

这是我当前的代码：

this.navLi = jQuery('nav ul li').children('ul').css("display","block").hide().end();
this.navLi.hover(function() {
    // mouseover
    jQuery(this).find('> ul').stop(true, true).slideDown(100);
}, function() {
    // mouseout
    jQuery(this).find('> ul').stop(true, true).slideUp(100);
});

Answer 1

我建议您尝试 hoverIntent 插件。它对于这样的事情非常有效。

这是 jsFiddle 上的示例。它非常适合您设置代码的方式。

请注意，您的第一个选择器正在寻找标签

这是正确的吗？

示例
HTML

<div id="nav">
    <ul>
        <li class="head">
            First
            <ul>
                <li>1.1</li>
                <li>1.2</li>
            </ul>
        </li>
        <li class="head">
            Second
            <ul>
                <li>2.1</li>
                <li>2.2</li>
            </ul>
        </li>

    </ul>
</div>

Javascript

jQuery(function() {
    this.navLi = jQuery('#nav ul li').children('ul').css("display","block").hide().end();
    this.navLi.hoverIntent(function() {
        // mouseover
        jQuery(this).find('> ul').slideDown(100);
    }, function() {
        // mouseout
        jQuery(this).find('> ul').slideUp(100);
    });
});

CSS

#nav, #nav ul { list-style: none; }
#nav, #nav * { padding: 0; margin: 0; }
li.head { width: 100px; float: left; border: 1px black solid; }

Answer 2

这就是 中的 second true （参数）的效果stop 方法，来自文档：

.stop([clearQueue],[jumpToEnd])
clearQueueA 布尔值，指示是否
也可以删除排队的动画。
默认为 false。 jumpToEndA
指示是否完成的布尔值
立即播放当前动画。
默认为 false。

只需删除第二个参数，看看这是否是您想要的。