如何顯示前n個元素，然後展開以顯示剩餘元素？

Question

我有一個元素列表（比方說10），我只顯示頁面加載前4個。
點擊more將展開列表並顯示其餘元素。

我的HTML代碼如下所示：

<div id="sales"> 
    <div class="listContainer"> 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>n</li> 
      <li>10</li> 
     </ul> 
    </div> 
    <div class="expandSalesList">More</div> 
    </div> 

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解決的是在事務所的舉動（fiddle）滑下：

var n = 4, 
    $list = jQuery('#sales ul'); 

$list.find('li:lt(' + n + ')').addClass('show'); 

jQuery('#sales .expandSalesList').live('click',function() { 
    var $li = jQuery('<li />'); 
    $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; 
}