1

次の 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 に展開されます....

助けてくれてありがとう

4

2 に答える 2

4 
$('#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;
});
于 2012-08-23T00:40:47.053 に答える
0

一度に 3 つインクリメントするには、ある種のカウンターを作成する必要があります。count という変数を作成しました。これは 0 ベースのインデックスであるため、2 (3 番目の項目) からカウントを開始します。クリックするたびにカウンターが 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;
});​
于 2012-08-23T00:47:59.210 に答える