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上扩展

我使用此脚本来显示和隐藏

$('#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开始计数（第三项）。每次单击时，它会将计数器增加3并显示新结果。这是结果的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;
});

展开UL LI，限制为LI

2 个答案: