jQuery MouseenterおよびMouseoutイベントは、.toggle()を逆にして、マウスが既に元素を搭載しているときに逆ですか?
質問
次のコードでうまく機能するドロップダウンメニューがあります。
$('#menu ul li').mouseenter(function(){
$(this).children(".dropdown").toggle();
}).mouseleave(function(){
$(this).children(".dropdown").toggle();
});
これはあなたが期待するように機能します。問題は、マウスがすでにある場合です mouseenter
に $('#menu ul li')
いつ $(document).ready(function(){ })
解雇されますが、トグルは逆に動作しますか?
どうすればこれを避けることができますか?
解決
やりたくないです show()
の上 mouseenter
と hide()
の上 mouseleave
?
他のヒント
ただ電話する代わりに toggle
議論がなければ、マウスイベントハンドラーは明示的なブール奏者を渡すことができます showOrHide
値。合格 true
に toggle()
の中に mouseenter
ルーチン、そして false
の mouseleave
. 。または、他の答えで示唆されているようにして、ただ使用する show
と hide
.
マウスを移動せずにドキュメントをロードすると、マウスを移動するまでマウスオーバーアクションは切り替えられません。しかし、マウスが移動するとマウスオーバーが切り替えると思います。イベントでは、すでに「過剰」になっている場合はイベントです。
このコードはどうですか?とにかく、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; }
所属していません StackOverflow