2

フォーラム用にある種の「ネタバレ」を作成しようとしています。私はjqueryにかなり慣れていませんが、それは非常に簡単です。しかし、トグル div 要素を別のトグル div 要素内に配置すると、この問題が発生しました。2 番目のトグルは機能しません。誰かが私を正しい方向に向けることができますか?

Jクエリ

$(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。

助けようとしているすべての人に感謝します:)

編集：

投稿した直後に、HTML コードで複数の ID を使用していることがわかりました。div id をクラスに変更しましたが、クリックして content1 を表示すると、content2 も表示されます。誰かがそれを手伝ってくれますか？

4

3 に答える 3

2

両方の div が表示される$('.body')のは、 のクラスを持つ DOM 内のすべての要素に一致しbody、それらすべてに対して関数を実行するためです。

これを避けるには、具体的に名前を付けた div を使用するか、以下の例のように要素に別の識別子を追加します。

<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');
    });
});​
于 2012-05-12T16:22:05.883 に答える
1

それをクラスごとに分離し、いくつかの優れた jQuery Traversal メソッドを使用してクリーンにする必要があります。

.next セレクターを使用します。これはライブの jsFiddle です。

ワーキング JSFiddle

これを機能させるために使用したコードは次のとおりです。head と body を ID ではなくクラスに変更します。

$(document).ready(function(){
  $('.head').click(function() {
    $(this).next('.body').toggle('slow')
  });
});
于 2012-05-12T16:11:51.827 に答える
1

ええ、これを試してください https://jsfiddle.net/ufC5B/2/

$(document).ready(function(){
    $('.head').click(function() {
        $(this).siblings('.body:first').toggle('slow')
  });
});
于 2012-05-12T16:07:38.490 に答える