1

私はjQueryを初めて使用しますが、このjQueryドロップダウンの問題を解決する方法がわかりません。

リンクの1つにカーソルを合わせると、ドロップダウンメニューは正常に機能しますが、ナビゲーションに2つ目のドロップダウンを追加しました。リンクのいずれかにカーソルを合わせると、両方のドロップダウンが表示されます。現在のドロップダウンメニューのみを表示したい。

これが私のコードであり、jsfiddleへのリンクhttp://jsfiddle.net/K2Zzh/1 / ..。

$('.dropdown ul').hide();   
$('.dropdown').hover(function(){
    $('.dropdown ul').stop().slideDown(500);
    },function(){
    $('.dropdown ul').stop().slideUp(200);
});

なぜそれが何をしているのかを知っており、どこかで使用する必要があることはわかっていますが、thisどこで使用するのかわかりません。

4

4 に答える 4

2

$(selector, context)またはfindメソッドを使用できます。

$('.dropdown ul').hide();    
$('.dropdown').hover(function(){
    $('ul', this).stop().slideToggle(500);
});

http://jsfiddle.net/JKG5N/

于 2012-12-16T17:10:55.613 に答える
1

ドロップダウンホバー関数にコンテキストを追加する必要があります。イベントハンドラーは、ホバーされている要素のコンテキストで発生するため、言う$('ul', this).stop().slideDown(500)と$('ul', this).stop().slideUp(200)機能するはずです。

変更されたjsFiddle：http: //jsfiddle.net/7zbGH/1/

于 2012-12-16T17:11:14.650 に答える
1

以下のようにコードを調整します。

$('.dropdown ul').hide();    

$('.dropdown').hover(function(){
      $(this).children('ul').stop().slideDown(500);
    },function(){
      $(this).children('ul').stop().slideUp(200);
});

JSフィドル

于 2012-12-16T17:11:58.167 に答える
1

次のように、関連するリストのみをターゲットにする必要があります。

var $dropdown;

$('.dropdown ul').hide();
$('.dropdown').hover(function() {
    $dropdown = $(this).find('ul');
    $dropdown.stop().slideDown(500);
}, function() {
    $dropdown.stop().slideUp(200);
});​

デモ

上記の変数を使用している唯一の理由は、同じドロップダウンで2回トラバースする必要がないためです。これは、入るのに良い習慣です。

もちろん、これも行うことができます。

$('.dropdown ul').hide();
$('.dropdown').hover(function() {
    $(this).find('ul').stop().slideDown(500);
}, function() {
    $(this).find('ul').stop().slideUp(200);
});​

また、children（ ）の代わりにfind（）を使用した理由は、DOMツリーを1レベル下に移動するだけで、複数レベルを下に移動して子孫要素を選択できるためです。children()find()

あなたの特定のケースchildrend()では、あなたはたった1レベル下にいるので、絶対に問題ないようです。

編集
完全を期すために、単一のホバー関数内でslideToggle（）を使用する場合は、別の回答に示されているように実行できます。

$('.dropdown').hover(function() {
    $(this).find('ul').stop(true, true).slideToggle(500);
}

ただし、このオプションを使用する場合は、スライドメニューが元に戻らないようにするためtrue, trueに、stop（）lagging呼び出しに含める必要がある場合があることに注意してください。

  • clearQueueAキューに入れられたアニメーションも削除するかどうかを示すブール値。デフォルトはfalseです。
  • jumpToEndA現在のアニメーションをすぐに完了するかどうかを示すブール値。デフォルトはfalseです。
于 2012-12-16T17:12:04.247 に答える