0

私が望むことをほぼ実行するコードを見つけました。しかし、機能を微調整するために適切に変更する方法がわかりません。

私がやりたいこと：

  1. リスト項目が 3 つ以上ある場合は、残りの項目を非表示にして、クリックすると残りの項目が表示される [すべて表示] ボタンを表示します。

  2. 項目が 2 つ未満の場合は、[すべて表示] ボタンを非表示にします。

  3. オプション - アイテムを明らかにするときに素敵な効果を追加します。

HTML 

<span class="show_button">Show all</span>
<ul class="test">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

Javascript

$('ul.test li:gt(2)').hide();
if ( $('ul.test li:lt(2)') ) {
    $('.show_button').css('display', 'none');
}
else {
    $('.show_button').css('display', 'block');
}
$('.show_button').click(function() {
    $('ul.test li:gt(2)').show();
});

残念ながら、このコードは、利用可能なアイテムが 3 つ以上ある場合、[さらに表示] ボタンを表示せず、非表示にするだけです。

4

3 に答える 3

2 
$('ul.test li:gt(2)').hide();

$('.show_button').click(function () {
    $('ul.test li:gt(2)').toggle('slide');
});

http://jsfiddle.net/BjG5M/

于 2013-05-27T11:01:55.897 に答える
0

1 行だけ変更する必要があります。最初の if ブロックは常に true を返します。セレクターは常にオブジェクトを返すため、そのjQuery結果をチェックすると常に true が返されます。返されるオブジェクトには要素の配列が含まれます。セレクターによって一致する要素がない場合、この配列は空 (長さ 0) になります。

if ( $('ul.test li:gt(2)').length > 0 ) {
    $('.show_button').css('display', 'block');
} else {
    $('.show_button').css('display', 'none');
}
于 2013-05-27T10:59:38.747 に答える