Wie wird eine jQuery-Funktion nur für untergeordnete Elemente ausgeführt?

Question

Ich versuche, alle untergeordneten Kommentare einschließlich des übergeordneten Kommentars zu reduzieren, wenn einige Klicks auf das Symbol im übergeordneten Kommentar verschachtelt sind.

Mit dem unten stehenden jQuery-Code konnte ich das Kommentarfeld reduzieren, aber jetzt werden die Kommentare innerhalb eines anderen Abschnitts ebenfalls zusammengebrochen.

jQuery-Code -

$('.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'); 
}); 

Seit HTMLand CSS war zu lang. Ich habe einen Codepen erstellt. Unten ist der direkte Link dazu.

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

Vielen Dank im Voraus.

Answer 1

Ich denke, Sie sollten verschiedene Klassen für divs verwenden. Wenn Sie auf die Klasse .content-togle klicken, führt JavaScript-Code Aktionen für alle .single-comment-wrapper .cment-text, .single-comment-wrapper .cment-bottom, .single-comment-outer .child-comment-Klassen aus.

Answer 2

Die Struktur Ihrer divs macht diese tricky, ich habe für ~ 10 Minuten um auf der Geige zu spielen und habe mit diesem kommen - seiner Position in der richtigen Richtung, aber nicht perfekt ...

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

Alle Plus- und Minuswerte ändern sich, da Ihr Code derzeit auf Klassen ausgerichtet ist. Er muss geändert werden, damit er relativ zu +/- ist. Klicken Sie also auf $ (this). etc

Answer 3

aktualisieren Sie jQuery Elemente in Bezug auf Ihre geklickt Element zu suchen:

$('.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('[+]'); 
     } 
    }); 
}); 

Auch wenn Sie Markup ändern können Kinder Elemente im Rahmen des Haupt Kommentar Element enthalten, wäre es viel einfacher sein, arbeiten mit. Eine baumähnliche Ansicht basierend auf würde Markup vereinfachen und die Menge an HTML-Elementen reduzieren.