如何显示两个回复，并将其余回复折叠在查看回复下.(我很难显示两个回复）

how to show two replies, and fold the rest of them under view replies. (I'm having hard time showing two replies)

本文关键字：回复 两个 显示 折叠 很难 何显示 余回复      更新时间：2023-09-26

我有一个评论系统，它目前折叠所有回复。我想显示两个回复，然后将它们全部折叠。现在我研究了这个 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 中。实时预览

添加了类名的 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();

目前，您正在隐藏整个div。我没有测试它，但试试这个：

<script>
$('.replies').click(function(e){
  e.preventDefault();
  $(this).next(".got_replies").children("ul").children("li:nth-child(n+2)").fadeToggle(); 
})
</script>
相关文章：