1

ナビゲーション バーに jQuery を使用して小さなアニメーションを追加しようとしています。現在、css :hover 疑似クラスを使用して、ナビゲーション バーのサブ メニューを display:none から display:block に変更しています。私が言ったように、私はこれを jQuery でやろうとしているので、css で使用したものと同様のセレクターを作成する必要があります。子リストのみを表示する私が使用していたセレクターは次のとおりです。

#nav ul li:hover > ul

そして、これは完全に機能しましたが、jQueryセレクター内で:hover疑似クラスを使用できないことは明らかです。.hover()メソッドを次のように使用しようとしました(これにはまだアニメーションがありません):

 $('#nav ul li').hover(function() {
 $('#nav ul li').children('ul').css('display','block');
 }, function() {
 $('#nav ul li').children('ul').css('display','none');
 });

ただし、リスト項目のいずれかにカーソルを合わせると、すべてのサブメニューが表示されます。jsfiddle の例をいくつか示します。

css でどのように見えるか (および jQuery で再作成したいもの): http://jsfiddle.net/FHdLC/

上記の jQuery コードの結果: http://jsfiddle.net/LBK3T/

ご協力いただきありがとうございます。

4

1 に答える 1

2

次のように、ハンドラー内の現在の要素thisを参照するために使用します。.hover()

$('#nav ul li').hover(function() {
   $(this).children('ul').css('display','block');
}, function() {
   $(this).children('ul').css('display','none');
});

上記のコードを使用した例を次に示します:)

.toggle()また、次のように、を使用してさらに短縮することもできます。

$('#nav ul li').hover(function() {
   $(this).children('ul').toggle();
});​

.toggle()ここでバージョンをテストできます

于 2010-07-01T17:11:41.003 に答える