0

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

4

3 回答 3

1

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

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

于 2013-07-09T23:19:43.690 回答
1

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

$('.showcomments').on('click', function(e) {
    e.preventDefault();
    var comment =  $(this).closest('.post').find('.comments');
    $('.comments').not(comment).slideUp();
    comment.slideToggle();
});
于 2013-07-09T23:19:58.237 回答
0

这可能会奏效：

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

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

于 2013-07-09T23:20:06.190 回答