jQuery、Toggle in toggle

Question

私はフォーラムのために何らかの「スポイラー」を作成しようとしています。それはかなりシンプルですが、私はかなりjqueryに新しいです。しかし、トグルdiv要素を別のトグルdiv要素内に配置するときにこの問題が発生しました.2番目のトグルは機能しません。誰かが私を正しい方向に向けることができますか？ :)

EDITを手助けしようとしているすべての人に

のjQuery

$(document).ready(function(){ 
    $('.head').click(function() { 
    $('.body').toggle('slow') 
    }); 
}); 

HTML

<div class="head"> 
Show Content 
</div> 
<!--1st toggle div--> 
<div class="body" style="display:none;"> 
    Content 
    <div class="head"> 
    Show Content 
    </div> 
    <!--2nd toggle div--> 
    <div class="body" style="display:none;"> 
    Content 
    </div> 
</div> 

Jsfiddle here.

ありがとう：

私はHTMLコードで複数のIDを使っているのを見たことがあります。 私はdiv idをクラスに変更しましたが、今クリックしてcontent1を表示すると、content2 も表示されます。誰かがそれで私を助けることができますか？

Answer 1

うんあなたはクラスでそれを分離し、それをきれいにするためにいくつかの素晴らしいjQueryのトラバーサルメソッドを使用する必要があり、このhttp://jsfiddle.net/ufC5B/2/

$(document).ready(function(){ 
    $('.head').click(function() { 
     $(this).siblings('.body:first').toggle('slow') 
    }); 
}); 

Answer 2

を試してみてください。

私たちは.nextセレクタを使用します。ここにはライブjsFiddleがあります。

Working jsFiddle

ここで私はそれを動作させるために使用したコードです。頭や体をIDの代わりにクラスに変更する。 $('.body')がbodyのクラスを持っているDOM内のすべての要素にマッチし、それらのすべてに機能を実行するので、

$(document).ready(function(){ 
    $('.head').click(function() { 
    $(this).next('.body').toggle('slow') 
    }); 
}); 

Answer 3

どちらのdivが表示します。

これを避けるには、特に指定したdivsを使用するか、以下の例のように要素に別の識別子を追加します。

<div class="head" data-depth="1"> 
    Show Content 1 
</div> 
<!--1st toggle div--> 
<div class="body" data-depth="1" style="display:none;"> 
    Content 
    <div class="head" data-depth="2"> 
     Show Content 2 
    </div> 
    <!--2nd toggle div--> 
    <div class="body" data-depth="2" style="display:none;"> 
     Content 
    </div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​ 

$(document).ready(function(){ 
    $('.head').click(function() { 
     var depth = $(this).attr('data-depth'); 
     $('.body[data-depth=' + depth + ']').toggle('slow'); 
    }); 
});​