jQuery显示隐藏的li元素，但随后隐藏可见的li元素

Question

以下jQuery代码调用ul元素，在元素中查找前三个 li列表项，并隐藏其余的li项。 然后，它附加一个li元素，该元素表示“显示更多...”，并且在单击时会显示以前隐藏的列表项。

（问题底部的jsFiddle）

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

很简单。 现在，除了在用户单击“显示更多...”时显示隐藏的列表项之外，我还需要它还隐藏最初保留为可见的前三个列表项。 通过插图：

---

代码当前生成的内容：

 - 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...

---

出于可用性的目的，如果再次单击“显示更多...”，则再次使前三个列表项变为可见，而其余列表元素被隐藏，那也很好。

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

Answer 1

看到这个： http : //jsfiddle.net/g9L9R/7/

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

您将在此处获得不错的切换效果...

Answer 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();
}
});
});

Answer 3

试试看：

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

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

Answer 4

与列表长度无关的解决方案，最后隐藏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/

Answer 5

使用visible隐藏其他内容：

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

在这里看到j​​sfiddle。