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一個按鈕，與包含的其他類moreComments一個div意見，那麼你可以使用這個腳本：

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

它還刪除按鈕本身，但如果你想要的按鈕切換意見，這樣做：

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