サブナビを持つnavがあります。ユーザーがnavのliの上を移動すると、それぞれのliのサブナビが表示されます。私はnavからマウスをsubnavに移動させることでmouseoutが発生するという問題が発生しています。私はタイムアウトを実装する必要があると思っていましたが、開始する場所が不明で、動作させることができません。代わりにmouseover/mouseout
のjsのフィドル以下...jqueryは、サブナブに移動するとマウスオーバーを発生します。
0
A
答えて
1
てみてください。これにより
timeoutHandle = setTimeout(navMouseOut($subnav), 300);
は:
timeoutHandle = setTimeout(navMouseOut, 300, $subnav); //Works for all but IE!!
これは、関数navMouseOut
から参照を渡します。 navMouseOut
パラメータ$subnav
もまた、第3のパラメータとしてsetTimeout
に渡されます。 setTimeout
という3番目のパラメータはIEによって無視されることに注意してください。しかし、すべての最新のブラウザで動作します。
あなたはクロスブラウザの比較が必要な場合、あなたはnavMouseOut
timeoutHandle = setTimeout(function() {
navMouseOut($subnav);
}, 300);
詳細情報
を起動するために、setTimeout
に匿名関数を渡す必要があります0
1
2つのこと、あなたが使用する必要があるすべてのmouseenter/mouseleave
の最初の(jQueryのに利用できるおかげで)を参照してください。子要素に移動するときにこれらは起動しません。 thisおよびthisを参照してください。
第2に、タイマーを実装するか、すばらしいjQuery hoverIntent plug-inを使用することができます。置換
0
適切なCSSの配置に応じてサブナビの動作が気にかからなければ、この場合は完全にタイマーをスキップしてください。
<ul id="nav">
<li>Howdy
<ul class="subnav">
<li>Howdy</li>
<li>Howdy</li>
<li>Howdy</li>
</ul>
</li>
<li>Howdy
<ul class="subnav">
<li>Howdy</li>
<li>Howdy</li>
<li>Howdy</li>
</ul>
</li>
CSS:
#nav {
margin-top: 0 !important;
width: 200px;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
position: relative;
display: block;
margin: 0 0 3px 0;
border:thin solid black;
}
.subnav {
position: absolute;
margin: none;
left:198px;
top:-1px;
width: 200px;
display: none;
}
Javascriptを:ここでは何ができるかのアイデアは
HTML(あなたがjFiddleていたものから大幅に単純化された)である
$('#nav li').mouseenter(function(event) {
$(this).children().show();
});
$('#nav li').mouseleave(function(event) {
$(this).children().hide();
});
ここで重要なのは、navリスト項目とそのサブナブリストが接触している限り、サブナブが 'li'の一部であるため、 'mouseleave'または 'mouseout'イベントは 'li'で発生しません。サブナビまたはその親「li」のいずれかを離れると、「mouseleave」イベントが発生します。 jFiddleでうまく働いた。
上記のように、あなたのサブナビにも「ul」を個人的に使用したいと思います。意味的には、私にはもっと意味があります。
関連する問題
- 1. jQueryのマウスオーバー移動が
- 2. 移動が発生するとイベントが発生する
- 3. 移動中にランダムクラッシュが発生する
- 4. Jqueryデータページ間を移動するとテーブル行のイベントが発生する
- 5. ASP.Netアプリケーションに移動すると、2つのナビゲーションが発生しました。
- 6. ライブサイトをローカルに移動した後にエラーが発生する
- 7. Javascriptでマウスオーバーすると、厄介なボタンが移動しますか?
- 8. jQuery UIはマウスの移動にドラッグしてクリックすると移動する
- 9. jQueryを使用してエラーが発生したときにページの先頭に移動する方法Validate
- 10. ブートストラップを複製するメインナビゲーションとサブナブ
- 11. jquery .remove()はインデックスを移動します
- 12. 未捕捉RangeError:Javascript/Jqueryでオートコンプリートをマウスオーバーすると、最大コールスタックサイズが超過し、オートコンプリートドロップダウンが発生する
- 13. jQueryサイクルフェードエフェクトとマウスオーバー
- 14. Codeigniter 2.1をウェブホストに移動するとMySQLデータベースの問題が発生する
- 15. CakePHPプラグイン間を移動するときにエラーが発生する
- 16. ヘロクに移動するときにOmniAuth ActiveRecordエラーが発生する
- 17. Jqueryマウスオーバー時に左にdivを、マウスオーバーでcollaspeを動かす必要はありませんか?
- 18. jqueryはマウスオーバー時にフェードインする
- 19. クライアントサイドに移動すると、ASP.NETのjQuery
- 20. エラーが発生した場合、Powershell foreachは次へ移動します
- 21. WPF XamDataGrid:ユーザーが列を移動またはサイズ変更したときに発生するイベント
- 22. jqueryでスクロールした後にdivを移動して移動します
- 23. jquery-railsをバンドルするとエラーが発生しますか?
- 24. jQueryのクリックイベントを使用するとエラーが発生します
- 25. jQueryチェンジイベントは、変更コールバック内の別のコントロールにフォーカスを移したときに2回発生しました
- 26. アンドロイドの生のフォルダからSDカードにファイルを移動すると、ファイルは移動しません
- 27. GAEデータストアビューアでutf8エラーが発生する(実行時に移動)
- 28. document.readyの外でajaxリクエストを移動すると404エラーが発生する
- 29. C#:DynamicCastHelperで配列を構造体に移動すると問題が発生しました
- 30. divとして移動するjQuery Sliderは位置をアニメーションします
私は() '個々のjqueryの機能 – bflemi3
まあ、どちらかあなたは、hoverIntent()を使うの回答でキンクをチェックアウト、またはこれらの方法を使用する必要がありますない'ホバーを使用しています。これが適切に行う方法です。 – jmlnik