隐藏所有li元素并显示前2个并按按钮切换它们

假设我有

 
2
 
3
 
4
 
5
  

我希望jQuery代码隐藏所有

然后显示第一个，然后第二个append()附加

more

，用于切换隐藏的li。

Answer 1

这应该做到..

 // hide all li and then show the first two $('ul li').hide().filter(':lt(2)').show(); // append a li with text more that on click will show the rest $('ul').append('
more
').find('li:last').click(function(){ $(this).siblings(':gt(1)').toggle(); }); 

演示于 ： http ： //jsfiddle.net/gaby/tNGxN/2/

---

更新以将更改文本从更多更改为更少..

 $('ul li') .hide() .filter(':lt(2)') .show(); $('ul') .append('
moreless
') .find('li:last') .click(function(){ $(this) .siblings(':gt(1)') .toggle() .end() .find('span') .toggle(); }); 

需要一个css规则.less{display:none}

演示 ： http ： //jsfiddle.net/gaby/tNGxN/3/

Answer 2

这是你要找的东西吗？

  $('li').hide() .slice(0,1) .addClass('fixed') .show(); $('
more
') .appendTo('ul') .click( function() { $('li:not(.toggle,.fixed)').toggle(); });