Question

之前已经提出类似的问题，但我找不到这个。

<article class="fyre-comment-article>
    <div class="fyre-comment-wrapper">Parent Post
        <div class="fyre-outer-comment-container"> Contains all child
            <div class="fyre-comment-article">Single child with the same pattern as parent </div>
        </div>
</article>

当父级div在子级之前关闭且不是括号格式时，我能够处理折叠。

如何通过仅显示“父帖子详细信息”来折叠（点击）父帖子，并且内部应用于每个父帖子。

谢谢，

Answer 1

article标签中的class属性缺少结束引号，其中一个div标签根本没有关闭。

但基本上你可以这样做：

$('.fyre-comment-article').click(function() {
    $(this).find('.fyre-outer-comment-container').toggle();
});

当您单击article标签内的文本时，它将显示/隐藏两个嵌套最多的div。

这是JSFiddle。

更新

如果您在脚本加载后向DOM添加元素，那么绑定对它们不起作用，您可以使用.on()方法修复它，例如：

$(document).on('click', '.fyre-comment-article', function() {
  $(this).find('.fyre-outer-comment-container').toggle();
});

Answer 2

你可以试试这个：

HTML：

<article class="fyre-comment-article">
    <div class="fyre-comment-wrapper">Parent Post
        <div class="fyre-outer-comment-container"> Contains all child
            <div class="fyre-comment-article-inner">Single child with the same pattern as parent </div>
        </div>
    </div>
</article>

jQuery的：

$(function() {
    $('.fyre-comment-wrapper').click(function() {
        var $article = $(this).find('.fyre-comment-article-inner');
        if (!$article.is(':visible')) {
            $article.slideDown();  //or .fadeIn() or .show()
        } else {
            $article.slideUp();    //or .fadeOut() or .hide()
        }
    });
});

这是demo

修改

如果你想要'包含所有孩子'标签出现和消失，你必须写

.find('.fyre-outer-comment-container');

而不是

.find('.fyre-comment-article-inner');

Demo 2

折叠父div的所有子项

2 个答案:

更新