使用jQuery展开/折叠项目列表

Question

我在一个页面上有一个博客文章列表，需要让用户能够扩展/折叠每个博客的详细信息。我已经考虑过next（）之类的选项，但每篇博客文章的结构都不允许兄弟姐妹。

<div class="post">
     <div class="controls">
          <ul>
               <li>Permalink</li>
               <li><a href="#" class="showcomments">Comments</a></li>
          </ul>
     </div>
     <div class="comments">Comments go here</div>
</div>

我在一个页面上有无限数量的这些帖子，所以我需要一个简单的功能来实现它，这样，如果我点击任何帖子的"评论"链接，只有该帖子的.评论面板会展开/折叠（点击该链接会切换相应的评论div）。

Answer 1

定位链接，切换该帖子中评论的滑动，并向上滑动所有其他评论：

$('.showcomments').on('click', function(e) {
    e.preventDefault();
    var comment =  $(this).closest('.post').find('.comments');
    $('.comments').not(comment).slideUp();
    comment.slideToggle();
});

Answer 2

如果HTML的结构无法修改，则必须遍历DOM。。。从点击事件目标（锚点），到它的容器（li），到its容器（ul），到its容器（div.controls），然后next（）来查找div.comments。jQuery可以使这成为一个非常容易的链，但它显然有点脆弱。

如果您可以修改HTML的结构，那么您就有了一系列更好的选项，并且可以使用ID和数据属性来避免遍历DOM的开销。

Answer 3

这可能会奏效：

$(.showcomments).on("click", function() {
   $(this).parent().parent().find(".comments").show(); 
}

其想法是，它设置了一个点击回调，在内部，每个元素都会找到其祖父母，搜索注释部分并显示它。