2

このコードを 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);
});
4

2 に答える 2

3

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; }
于 2011-03-13T23:45:35.533 に答える
0

これは、ドキュメントからの、メソッド の2 番目 trueの(パラメーター)の効果です。stop

.stop( [ clearQueue ], [ jumpToEnd ] )
clearQueueAキューに入れられたアニメーションも削除するかどうかを示すブール値。デフォルトは false です。 jumpToEnd 現在のアニメーションをすぐに完了するかどうかを示すブール値。デフォルトは false です。

2 番目のパラメーターを削除して、これが必要かどうかを確認してください。

于 2011-03-13T23:04:49.113 に答える