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

Question

我有一个元素列表(假设有 10 个)，并且在页面加载时仅显示前 4 个。
单击更多将展开列表并显示剩余元素。

我的 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>

更新

这是我当前的代码:

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();

    });
});