如何显示前n个元素，然后展开以显示其余元素？

我有一个elemnts列表（让我们说10），我只在页面加载时显示前4。
单击more将展开列表并显示剩余元素。

我的HTML代码如下所示：

  
 
 
 
1
 
2
 
n
 
10
 
 
 
More
  

UPDATE

这是我目前的代码：

 jQuery('#sales li:gt(4)').hide(); jQuery('#sales .expandSalesList').live('click',function() { jQuery('#sales li').not(':visible').animate({height: 'toggle'}, 500, function() {}); }); 

如何在下次点击时将列表向上滑动？

我猜它一定是这样的：

 jQuery('#sales .expandSalesList').live('click',function() { jQuery('#sales li:lt(4)').animate({height: 'toggle'}, 500, function() {}); }); 

更新2

我和你的帮助人找到了答案:)

 jQuery('#sales .expandSalesList').live('click',function() { jQuery('#sales li:gt(4):visible').animate({height: 'toggle'}, 600, function() {}); // This line MUST come before next line. jQuery('#sales li').not(':visible').animate({height: 'toggle'}, 500, function() {}); }); 

Answer 1

显示所有，谁不可见:)

 jQuery('#sales li:lt(4)').show(); jQuery('#sales .expandSalesList').live('click',function() { jQuery('#sales li').not(':visible').slideDown(); }); 

但最好隐藏所有“li高于4”而不是显示它们，所以没有JS的人可以看到结果。

像这样：

 jQuery('#sales li:gt(4)').hide(); jQuery('#sales .expandSalesList').live('click',function() { jQuery('#sales li').not(':visible').each( function() { jQuery(this).slideDown(); }); }); 

Answer 2

我有两个解决方案。 在第一个中，所有的li都是分开滑落的：

 var n = 4; jQuery('#sales li:lt(' + n + ')').show(); jQuery('#sales .expandSalesList').live('click',function() { jQuery('#sales li:gt(' + (n - 1) + ')').slideDown(); }); 

这很容易，现在看到解决方案所有的li 在一个单一的移动 （ 小提琴 ）滑落：

 var n = 4, $list = jQuery('#sales ul'); $list.find('li:lt(' + n + ')').addClass('show'); jQuery('#sales .expandSalesList').live('click',function() { var $li = jQuery('
'); $list.find('li:gt(' + (n - 1) + ')').addClass('show') .appendTo($li); $li.appendTo($list).slideDown(function() { var $this = $(this); $this.find('li') .appendTo($list) $this.remove(); }); n = $list.find('.show').length; }); 

介意有以下CSS：

 .listContainer li { display: none; } .listContainer li.show { display: block; }