0

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

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 回答
2

试试这个：

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

于 2012-12-24T07:34:08.763 回答
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 回答