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);

DEMO：http://jsfiddle.net/5WgYK/1/

Answer 5

使用visible隐藏其余内容：

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

请参阅jsfiddle here。

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

代码当前生成的内容：

需要发生什么：

5 个答案: