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

【问题标题】：Expand/Collapse List of Items with jQuery使用 jQuery 展开/折叠项目列表
【发布时间】：2013-07-10 07:20:06
【问题描述】：

我在页面上有一个博客文章列表，需要让用户能够展开/折叠每个文章的详细信息。我已经查看了诸如 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>

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

【问题讨论】：

标签： jquery

【解决方案1】：

定位链接，切换该帖子中 cmets 的滑动，然后向上滑动所有其他 cmets：

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

【讨论】：

【解决方案2】：

如果无法修改 HTML 的结构，您将不得不遍历 DOM……从点击事件目标（锚点）到其容器 (li) 再到 ITS 容器 (ul)直到 ITS 容器 (div.controls)，然后 next() 找到 div.cmets。 jQuery 可以使它成为一个非常简单的链，但它显然有些脆弱。

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

【讨论】：

【解决方案3】：

这可能会奏效：

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

这个想法是它设置了一个点击回调，在里面，每个元素都在寻找它的祖父母，并搜索 cmets 部分并显示它。

【讨论】：