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();
});

jsFiddle

有更有效的方法来编写此代码，但这一方法相当可读。

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/

我如何仅显示5个Li并且有一个显示5个以上的按钮

2 个答案: