javascript - 选择要显示和隐藏的 html 类

Question

我有以下基于 $.get JSON 动态构建的 HTML 代码。

<div class="forum-post">
  <div>
    <span class="forum-title">Test post</span><span class="forum-type label label-forum-Discussion">Discussion</span>
  </div>

  <div class="forum-author">
    By: Jared De La Cruz on Thursday, June 27, 2013 7:17:43 PM
  </div>
  <pre>
    This is a test post
  </pre>

  <div class="btn-group">
    <a class="btn btn-mini btn-primary btn-forum-comment" id="51ccf2471238f1cc13000003"><i class="icon-comment icon-white"></i> comment</a>
  </div>

  <div class="btn-group">
    <a class="btn btn-mini btn-inverse btn-forum-comment-show" id="51ccf2471238f1cc13000003"><i class="icon-plus-sign icon-white"></i> show</a>
  </div>

  <div class="forum-comments">
    <div class="forum-author">
      By: Jared De La Cruz on Saturday, June 29, 2013 11:56:29 PM
    </div>
    <pre>
      This is a test comment
    </pre>
  </div>
  <hr style="border-top: 1px dotted #b0b0b0;border-bottom: 0px">
</div>

评论列表可以变大。当用户点击显示时，我希望论坛评论显示/隐藏。

// Button dynamic comment show
$("#forum").delegate(".btn-forum-comment-show", "click", function() {
  var post = $(this).parents(".forum-comments");
  console.log(post);
});

如何获取所选帖子的选择器 .forum-comments？与我一样 $('#ID').hide();

Answer 1

您可以使用parent/closest + next 方法:

$("#forum").delegate(".btn-forum-comment-show", "click", function() {
   $(this).parent().next(".forum-comments").toggle();
});