我如何显示只有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。

有更有效的方法来编写这段代码，但这个代码是相当可读的。