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

jQuery show hidden li elements, but then hide visible li elements

本文关键字：li 元素 隐藏 显示 jQuery      更新时间：2023-09-26

下面的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/

请参阅：http://jsfiddle.net/g9L9R/7/

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

你会在这里得到一个很好的切换效果。。。

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

试试这个：

$('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/

独立于列表长度的解决方案，隐藏末尾的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/

使用visible隐藏其余部分：

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

请看这里的jsfiddle。

相关文章：