ナビゲーションを展開できません

Question

最近、私の知識を拡大したいと考えてjqueryを試しています。私は何か奇妙なことに出くわしました。私は、ユーザーがさらにそれを拡張できるようにするためのナビゲーションを持っています。ただし、展開するたびに、特定のメニューではなくすべてのメニューが開きます。ここで

$('.expandicon').click(function(){ 
    if ($('.nav-bucket-items').css('display') == 'none') 
    $('.nav-bucket-items').css('display','block'); 
    else 
    $('.nav-bucket-items').css('display','none'); 
}); 

は、私が使用したコードであり、ここでの例です： https://jsfiddle.net/xajoujsx/

あなたが見ることができるように、あなたは+ボタンをクリックすると拡大し、それはすべてのナビゲーションを開きます。私はちょうど私がクリックしたものを開くようにしたかった。誰も私が間違っていることを説明することはできますか？

Answer 1

現在、このコードはクラス.nav-bucketを持つすべての要素に対してこのコードを実行します。

1つの選択肢は、親の即時項目にのみ適用することです。

$('.expandicon').click(function() { 
    var $ref = $($(this).parent().parent()).find('.nav-bucket-items') 
    if ($ref.css('display') == 'none') 
    $ref.css('display', 'block'); 
    else 
    $ref.css('display', 'none'); 
}); 

Answer 2

クリックハンドラ内から、あなたが使用して.nav-bucket-itemsを参照することができます：あなたが行うとき

$(this).parent().siblings('.nav-bucket-items') 

fiddle

Answer 3

いくつかのことをまず、ここで起こって、あなたはすべての要素をターゲットにしています$('.nav-bucket-items')

コンソールで実行すると、1つではなく要素のリストが表示されるはずです親をターゲットにして、兄弟を見つけたら、アイコンではなく要素リンクをターゲットにして、ユーザーが要素全体をクリックして展開できるようにします。

の作業例：https://jsfiddle.net/dg4z271m/1/

Answer 4

私は質問に答えるのためにコードを修正するよりも、自分のコードについて誰かの詳細を学ぶことができたとき、私はそれを愛します。 まず、.css（ 'display'、 'block'）は必要ないと言って始めましょう。 .show（）en .hide（）はあなたのために要素を表示または非表示にします。驚くべきことではない？ だから、今私たちはこれを残しています。

$('.expandicon').click(function(){ 
    if ($('.nav-bucket-items').css('display') == 'none') 
     $('.nav-bucket-items').show(); 
    else 
     $('.nav-bucket-items').hide(); 
}); 

しかし、今でもマルチ拡張メニューの問題があります。これは、クラス '.nav-bucket-items'を使用してalle要素を表示（または非表示）するためです。私たちは、クリックした.expandiconのファミリではありません！ $（this）でこれを行うことができます。クリックした要素から$（this）を使ってトラバースすることができます。どれどれ。

これを使用すると、望みどおりに動作します。しかし、私たちはこれ以上のことができます！私たちはそれを短く、より良く、よりきれいにすることができます。 .nav-bucket-itemsが表示されているかどうかを確認する必要はありません。いいえ。

$('.expandicon').click(function(){ 
    $(this).parent().next('.nav-bucket-items').toggle(); 
}); 

あなたは何が起こったのですか？私たちはちょうどその要素をトグルする1行に、そのコード全体を変更しました。だから、それが隠されて、それが表示され、それが隠されたときに表示されます！ファンタジーなエフェクトが本当に必要な場合は、.toggle（）の代わりにslideToggle（）またはfadeToggle（）を使用できます。あなたのJSFiddleを更新しました：https://jsfiddle.net/xajoujsx/3/