jQuery MouseenterおよびMouseoutイベントは、.toggle（）を逆にして、マウスが既に元素を搭載しているときに逆ですか？

Question

次のコードでうまく機能するドロップダウンメニューがあります。

$('#menu ul li').mouseenter(function(){
    $(this).children(".dropdown").toggle();
}).mouseleave(function(){
    $(this).children(".dropdown").toggle();
});

これはあなたが期待するように機能します。問題は、マウスがすでにある場合です mouseenter に $('#menu ul li') いつ $(document).ready(function(){ }) 解雇されますが、トグルは逆に動作しますか？

どうすればこれを避けることができますか？

例えば： http://screenr.com/wbd

Answer 1

やりたくないです show() の上 mouseenter と hide() の上 mouseleave?

Answer 2

ただ電話する代わりに toggle 議論がなければ、マウスイベントハンドラーは明示的なブール奏者を渡すことができます showOrHide 値。合格 true に toggle() の中に mouseenter ルーチン、そして false の mouseleave. 。または、他の答えで示唆されているようにして、ただ使用する show と hide.

Answer 3

マウスを移動せずにドキュメントをロードすると、マウスを移動するまでマウスオーバーアクションは切り替えられません。しかし、マウスが移動するとマウスオーバーが切り替えると思います。イベントでは、すでに「過剰」になっている場合はイベントです。

このコードはどうですか？とにかく、JSはすべてのXMSのみをチェックするだけで、速すぎる場合、イベントを呼び出すことなくDIVから抜け出すため、あなたのバグはマウスアウトから切り替えられないと思います。

$('#menu ul li').mouseenter(function(){
    // hide all other divs
    $(".dropdown").hide(0);
    // show the div we want
    $(this).children(".dropdown").show(0);
}).mouseleave(function(){
    $(".dropdown").hide(0);
});

アニメーションを気にしない場合、CSSでこれを行うことは、JSよりも常に良い方法です。

このようにセットアップする必要があります。

<div id="menu">
    <ul>
        <li>
            Menu 1
            <div class="dropdown">Sub1</div>
            <div class="dropdown">Sub2</div>
        </li>
        <li>
            Menu 2
            <div class="dropdown">Sub1</div>
            <div class="dropdown">Sub2</div>
        </li>
    </ul>
</div>

CSS：

.dropdown { display: none; position: relative; }
#menu li:hover .dropdown { display: block; }