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

由于HTML和CSS太长。我创建了一个codepen。以下是与它的直接链接。

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

提前致谢。

Answer 1

你的div的结构让这很棘手，我已经在小提琴上玩了大约10分钟而且已经想出了这个 - 它朝着正确的方向前进但不完美......

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

所有加号和最小值都会发生变化，因为目前您的代码目标是类，它需要更改为相对于+/-单击所以$（this）。等

Answer 2

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

此外，如果您可以更改标记以在主要注释元素的上下文中包含子元素，那么使用它会更容易。基于ul的树状视图可以简化标记并减少HTML元素的数量。

Answer 3

我认为，你应该为div使用不同的类。因为当您单击.content-togle类时，javascript代码会对所有.single-comment-wrapper .comment-text，.single-comment-wrapper .comment-bottom，.single-comment-outer .child-comment类执行操作。

如何只为子元素运行jQuery函数？

3 个答案: