jquery - 我如何只显示 5 个 Li 并有一个显示 5 个以上的按钮

Question

我有 500 个li，但一开始我只想显示 5 个，然后我可以单击一个按钮，它会显示更多li的，也许最后没有更多li的，但不是所有的都只是另外 5 个？

Answer 1

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

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

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

js小提琴。

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

Answer 2

您可以在您的后面动态添加一个“更多”按钮，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/