jquery - 扩展 UL LI，限制为 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 on 3 或 4 on 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;
});