jquery - 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上的一个示例。它非常适合您设置代码的方式。

请注意，您的第一个选择器正在寻找标签<nav>，对吗？

示例
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

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

.stop( [ clearQueue ], [ jumpToEnd ] )
clearQueue一个布尔值，指示是否也删除排队的动画。默认为假。 jumpToEnd 一个 布尔值，指示是否立即完成当前动画。默认为假。

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