簡単な jQuery ドロップダウン メニューを作成しようとしています
-
18-09-2019 - |
質問
これが正しいかどうかはわかりませんが、jQueryで単純なドロップダウンメニューを作成しようとしています。基本的には、メニュー項目にカーソルを置くと div (リンク付き) が表示されるようにしたいのです。
メニュー:
<ul id="mainlevel">
<li><a href="#" class="mainlevel_home" ><span>Home</span></a></li>
<li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li>
<li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li>
</ul>
隠し部門:
<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div>
jQuery:
$(".mainlevel_feature-writers").hover(function(){
$(".subMenu").fadeIn("slow");
}, function() {
$(".subMenu").fadeOut("slow");
});
さて、これは非表示の div でフェードインし、フェードアウトしますが、誰かが新しく表示された div 内の何かの上にマウスを置いた場合にフェードアウトしないようにするにはどうすればよいですか?
本当に明らかな質問でしたら申し訳ありません。私はまだ勉強中です!:)
解決
扱いを分けたほうがいいと思います mouseover
そして mouseout
イベント。
おそらく、あなたが望んでいるのは、 mouseover
「トップレベル」メニュー要素にアタッチされるハンドラー、および mouseout
非表示の「ドロップダウン」 div にアタッチされるハンドラー (競合を管理するためのいくつかの状態コードを含む)。
所属していません StackOverflow