0

次のjQueryコードは要素を呼び出し、要素内の最初の3つのulリスト項目を検索し、残りの項目を非表示にします。次に、「もっと見る...」という要素を追加し 、クリックすると、以前に非表示にされていたリストアイテムを表示します。 lilili

（質問の下部にあるjsFiddle）

$('ul')
  .find('li:gt(2)')
  .hide()
  .end()
  .append(
    $('<li>Show more...</li>').click( function(){
      $(this).siblings(':hidden').fadeIn(500);
   })
);

十分に単純です。ここで、ユーザーが[もっと見る...]をクリックしたときに非表示のリストアイテムを表示するだけでなく、元々表示されていた最初の3つのリストアイテムも非表示にする必要があります。イラストによる：

コードが現在生成するもの：

 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...

（クリック）

 - List Item #1
 - List Item #2
 - List Item #3
 - List Item #4
 - List Item #5
 - Show more...

発生する必要があるもの：

 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...

（クリック）

 - List Item #4
 - List Item #5
 - Show more...

使いやすさのために、 [もっと見る...]をもう一度クリックすると、最初の3つのリスト項目が再び表示され、残りのリスト要素が非表示になると便利です。

jsFiddle： http: //jsfiddle.net/g9L9R/

4

5 に答える 5

6

これを参照してください：http：//jsfiddle.net/g9L9R/7/

$('ul')
.find('li:gt(2)')
.hide()
.end()
.append(
  $('<li>Show more...</li>').click( function(){
  $(this).siblings().toggle(500);
})
);​

ここで素晴らしいトグル効果が得られます...

于 2012-12-24T07:37:32.787 に答える
2 
$("li").each( function() {
if($(this).is(":visible")) {
$(this).hide();
}
else {
$(this).show();
}
});

そしてボタンのクリック

$("button").click( function() {
$("li").each( function() {
if($(this).is(":visible")) {
$(this).hide();
}
else {
$(this).show();
}
});
});
于 2012-12-24T07:27:32.263 に答える
1

リストの長さに依存しないソリューション、more最後にを非表示

var list = $('ul'),
    start = 0,
    items = list.find('li').slice(0, 3).show().end(),
    more = $('<li>Show more...</li>').click(function() {
        start = start + 3
        var newItems = items.slice(start, start + 3)
        items.filter(':visible').add(newItems).toggle(500);
        if (newItems.length < 3) {
            more.hide()
        }
    }).show()
    list.append(more);

デモ：http：//jsfiddle.net/5WgYK/1/

于 2012-12-24T08:08:46.900 に答える
0

visible残りを非表示にするために使用します。

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

ここでjsfiddleを参照してください。

于 2012-12-24T07:37:06.540 に答える