我如何顯示只有5李和有一個按鈕，顯示5更多

Question

我有500 li的，但我只想先顯示5，然後我可以點擊一個按鈕，並顯示我更多li的和也許最後沒有更多的li的，但不是所有的只是另一個5？

Answer 1

您可以動態地在您的ul之後添加一個「更多」按鈕，並一次顯示5個li，直到全部顯示。然後，你可以隱藏更多的按鈕：

var vis = 5; 
$('li').slice(vis).hide(); 

var $more = $('<a href="#">test</a>') 
$more.click(function(){ 
    $('li:hidden').slice(0,vis).show(); 
    if($('li:hidden').length == 0) 
     $more.hide(); 
}); 
$('ul').after($more); 

活生生的例子：http://jsfiddle.net/JKWtP/

Answer 2

var $li = $("li"), 
    chunk = 5; 

$li.slice(chunk).hide(); 

$("button").click(function() { 
    $li.filter(":hidden").slice(0, chunk).show(); 
});​ 

jsFiddle。

有更有效的方法來編寫這段代碼，但這個代碼是相當可讀的。