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; }