jquery - jQuery 从第一条评论向下滑动到整页

Question

我在一个页面上有一个包含 10 条评论的列表。他们的身高未知，因为这取决于评论的内容。

在单击按钮之前仅显示第一条评论的最佳方式是什么，此时它会向下滑动以显示页面中的所有 10 条评论？所以默认情况下，用户只会看到一条评论，直到他点击查看更多评论按钮，此时它将向下滑动以显示所有评论。

谢谢！

Answer 1

jQuery：

$(function(){
  $(".comments").not(":first").hide();
  $("#btnViewAll").click(function(){
    $(".comments").slideDown();
  });
});

HTML：

<input type="button" id="btnViewAll" value="Show All Comments" />
<div class="comments">1 comment</div>
<div class="comments">2 comment</div>
<div class="comments">3 comment</div>
<div class="comments">4 comment</div>
<div class="comments">5 comment</div>

Answer 2

如果您有一个带有类的按钮viewMoreButton和一个div带有moreComments包含其余评论的类的按钮，那么您可以使用此脚本：

$("div.moreComments").hide();
$(".viewMoreButton").click(function(){
    $("div.moreComments").slideDown("fast");
    $(this).remove();
}

它还会删除按钮本身，但如果您希望按钮切换评论，请执行以下操作：

$("div.moreComments").hide();
$(".viewMoreButton").click(function(){
    $("div.moreComments").slideToggle("fast");
}