javascript - 如何显示两个答复，并在 View 答复下折叠其余的答复。 (我很难显示两个答复)

我有一个评论系统，它可以折叠所有回复。我想显示两个答复，然后全部折叠。现在我研究了这个http://jsfiddle.net/isherwood/Frpmj/3/，但是我不太了解它，因为我对答复使用了for循环。这是我的代码。

<div class="replyInfo">
    {% if not comment.is_child %}
        <div class="wholeReply">
          {% if comment.comment_count %}
        <a href='#' class='replies'>
         {{comment.comment_count}}</a>
          {% endif %}
        <div class="got_replies">
        <ul style="list-style-type: none;">
        {% for child in comment.get_children %}
        <li>
      {{ child.get_comment }}
        </li><hr>
        {% endfor %}
        </ul>
      </div>
    </div>
  </div>

<script>
$('.replies').click(function(e){
  e.preventDefault();
  $(this).next(".got_replies").fadeToggle();
})
$(".got_replies").fadeToggle();

</script>

有人可以帮我吗？

最佳答案

您可以使用slice()函数选择类名称为reply的前两个元素。当然，您必须将类名称reply添加到您的html中。 Live Preview

具有添加的类名的HTML：

<div class="replyInfo">
    {% if not comment.is_child %}
        <div class="wholeReply">
          {% if comment.comment_count %}
        <a href='#' class='replies'>
         {{comment.comment_count}}</a>
          {% endif %}
        <div class="got_replies">
        <ul style="list-style-type: none;">
        {% for child in comment.get_children %}
        <li class="reply"><!--added class to your li element-->
      {{ child.get_comment }}
        </li><hr>
        {% endfor %}
        </ul>
      </div>
    </div>
  </div>

JavaScript：

    $('.replies').click(function(e){
  e.preventDefault();
  $(this).next(".got_replies").find(".reply").slice(0,2).fadeToggle();
});

$(".reply").fadeToggle();