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>

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

Answer 1

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

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

Answer 2

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

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

Answer 3

这可能会起到作用：

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

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

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

3 个答案: