3

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

$('#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

4

3 に答える 3

2

何度もやりたくないshow()ですか？mouseenterhide()mouseleave

于 2010-02-06T13:02:59.827 に答える
1

toggleマウス イベント ハンドラーは、引数なしで呼び出すだけでなく、明示的なブールshowOrHide値を渡すことができます。ルーチンでに渡しtrue、で. または、他の回答で提案されているようにして、 and を使用してください。toggle()mouseenterfalsemouseleaveshowhide

于 2010-02-06T13:04:01.620 に答える
0

マウスを動かさずにドキュメントをロードすると、マウスを動かすまでマウスオーバー アクションは切り替わりません。しかし、マウスが動くとマウスオーバーがトグルされると思います.onLoadですでに「オーバー」している場合はイベントです。

このコードはどうですか？とにかく、あなたのバグはマウスアウトがトグルされていないことが原因だと思います.JSはxミリ秒ごとにしかチェックせず、動きが速すぎると、イベントを呼び出さずに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);
});

アニメーションを気にしない場合は、JS よりも CSS を使用する方が常に優れています。

次のように設定する必要があります。

<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; }
于 2010-02-06T13:17:01.180 に答える