Jquery 用LI的极限扩展UL LI

Jquery 用LI的极限扩展UL LI,jquery,html,Jquery,Html,我有以下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> &

我有以下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>
所以,假设我有10个LI,在页面加载上显示3,如果我点击按钮扩展到6,再点击一次扩展到9


感谢您的帮助

要一次增加三个,您需要创建某种计数器。我创建了一个名为count的变量,因为它是基于0的索引,所以我们从第三项的2开始计数。每次单击时,计数器都会增加三,并显示新结果。以下是结果的中间部分:

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

要一次递增三个,您需要创建某种计数器。我创建了一个名为count的变量,因为它是基于0的索引,所以我们从第三项的2开始计数。每次单击时,计数器都会增加三,并显示新结果。以下是结果的中间部分:


这个问题与ajax有什么关系?错误。。。对不起,我将删除标记。这个问题与ajax有什么关系?错误。。。很抱歉,我将删除标签。谢谢工作正常,我只是不明白为什么在开始时显示4个LI,并且显示3$'list ul LI:gt3'。隐藏;但是效果很好。。若你们有时间,你们知道我是多么喜欢隐藏按钮,当并没有更多的李的扩展。谢谢。@alvaro修复了这个问题,请参阅更新的答案。gt使用基于0的索引,因此隐藏大于3实际上显示了前4;只需切换到gt2即可。还添加了在没有更多的要显示时隐藏按钮您知道如何在没有更多的要显示时隐藏.show_按钮吗?谢谢,效果很好。谢谢效果很好,我只是不明白为什么一开始就显示4个LI,这上面写着3$'列表ul LI:gt3'。隐藏;但是效果很好。。若你们有时间,你们知道我是多么喜欢隐藏按钮,当并没有更多的李的扩展。谢谢。@alvaro修复了这个问题,请参阅更新的答案。gt使用基于0的索引,因此隐藏大于3实际上显示了前4;只需切换到gt2即可。还添加了在没有更多的要显示时隐藏按钮您知道如何在没有更多的要显示时隐藏.show_按钮吗?谢谢,效果很好。
$('#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;
});
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;
});​