私は最近、ドロップダウンのあるリンクがいくつかあるシンプルなナビゲーションを作成しました。最初は CSS3 のみでしたが、しばらくするとドロップダウンが表示されるように jQuery を追加することにしました。(ほとんどの jQuery コードは、別のスレッドで与えられた回答に基づいています)
基本的に、私の問題は、ホバーした正しい要素をターゲットにできないことです。したがって、li 要素をホバーすると、すべてのドロップダウンが表示されます。できる限り微調整してみましたが、適切なコードが見つかりません。
どんな返信でも大歓迎です!
私のメニューは次のようになります。
<ul id="generale">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li>
<a href="#">Item 3</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
<li><a href="#">Subitem 4</a></li>
<li><a href="#">Subitem 5</a></li>
</ul>
</li>
<li>
<a href="#">Item 4</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
<li><a href="#">Subitem 4</a></li>
<li><a href="#">Subitem 5</a></li>
</ul>
</li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
そして私のjQuery:
var navTimers = [];
$( "#generale > li" ).hover(
function () {
var id = jQuery.data( this );
var $this = $( this );
navTimers[id] = setTimeout( function() {
$('#generale ul').fadeIn(200);
navTimers[id] = "";
}, 300 );
},
function () {
var id = jQuery.data( this );
if ( navTimers[id] != "" ) {
clearTimeout( navTimers[id] );
} else {
$('#generale ul').fadeOut(200);
}
}
);