子要素に対してのみjQuery関数を実行するには？

Question

親コメント内にネストされたアイコンを何度かクリックすると、親コメントを含むすべての子コメントを崩壊しようとしています。

以下のjQueryコードでは、コメントボックスの崩壊を得ることができましたが、別のセクション内にあるコメントも崩壊しています。

のjQueryコード -

$('.comment-toggle pre').on('click', function(e) { 
    $(".single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment ").slideToggle('fast', function() { 
     if ($(this).is(':visible')) { 
      $(".comment-toggle pre").text('[–]'); 
     } else { 
      $(".comment-toggle pre").text('[+]'); 
     } 
    }); 
}); 
$('.comment-toggle pre').on('click', function(e) { 
    $('.single-comment-wrapper .left-side').slideToggle('fast'); 
}); 

HTMLand CSSが長すぎたため。私はcodepenを作成しました。以下はそれへの直接リンクです。事前に

https://codepen.io/anon/pen/Vzrvbm

感謝。

Answer 1

私はdivと異なるクラスを使うべきだと思います。 .content-togleクラスをクリックすると、javascriptコードはすべての.single-comment-wrapper .comment-text、.single-comment-wrapper .comment-bottom、.single-comment-outer .child-commentクラスのアクションを実行します。

Answer 2

あなたのdivの構造は、これはトリッキーになり、私は〜10minsのためのフィドルに遊んでてきたし、これが出ている - 右方向の見出しが、完璧ではない...

$('.comment-toggle pre').on('click', function(e) { 
    $(this).parents('.single-comment-wrapper').next().slideToggle('fast', function() { 

現在、あなたのコードはクラスをターゲットにしているので、プラスとマイナスはすべて変更されます。+/+クリックされたように変更する必要があります。など

Answer 3

更新しますjQueryのあなたのクリックした要素に対する要素を検索する：

また

$('.comment-toggle pre').on('click', function(e) { 

    // find main comment element 
    var rootComment = $(this).closest('.single-comment-wrapper'); 

    // hide child comments of current comment 
    var children = rootComment.parent().find('>.child-comment'); 
    children.slideToggle('fast'); 

    // hide left part 
    rootComment.find('.left-side').slideToggle('fast'); 

    // hide current comment 
    rootComment.find('.comment-text').toggle('fast', function() { 
    if ($(this).is(':visible')) { 
     rootComment.find(".comment-toggle pre", this).text('[–]'); 
     } else { 
      rootComment.find(".comment-toggle pre", this).text('[+]'); 
     } 
    }); 
}); 

、あなたはそれがはるかに容易になるだろう、メインcomment要素のコンテキストに子要素が含まれるようにマークアップを変更することができる場合と連携。 ulに基づくツリーのようなビューは、マークアップを単純化し、HTML要素の量を減らす。