jquery - 以 LI 为限展开 UL LI

Question

我有以下 HTML 输出；

<div id="list">
<ul>
 <li>Test 1</li>
 <li>Test 2.</li>
 <li>Test 3</li>
 <li>Test 4</li>
 <li>Test 5</li>
 <li>Test 6</li>
 <li>Test 7</li>
 <li>Test 8</li>
 <li>Test 9</li>
 <li>Test 10</li>
 <li>Test 11</li>
 </ul>
</div>

我需要做的是显示相同的 HTML，但有一个按钮可以在 3 上扩展 3 或在 4 上扩展 4

我使用这个脚本来显示和隐藏

$('#list ul li:gt(3)').hide();
$('.show_button').click(function() {
    $('#list ul li:gt(3)').slideToggle();
    return false;
});

所以，假设我有 10 个 LI，在页面加载时只显示 3，如果我单击按钮展开为 6，再单击一次展开为 9....

谢谢你的帮助

Answer 1

$('#list ul li:gt(2)').hide();
$('.show_button').click(function() {
    $('#list ul li:hidden:lt(3)').slideToggle();

    if( ! $('#list ul li').is(':hidden') )
        $(this).hide();

    return false;
});

Answer 2

要一次增加三个，您需要创建某种计数器。我创建了一个名为 count 的变量，因为它是一个从 0 开始的索引，所以我们从 2（第三项）开始计数。每次单击时，计数器都会增加三并显示新结果。这是结果的 jsFiddle：http: //jsfiddle.net/qPBxs/

count = 2;
$('#list ul li:gt('+count+')').hide();
$('.show_button').live('click',function() {
    $('#list ul li:gt('+count+')').slideDown();
    $('#list ul li:gt('+(count + 3)+')').hide();
    count = count + 3;
    return false;
});​