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

【问题标题】：How can I display first n elements, then expand to show remaining elements?如何显示前 n 个元素，然后展开以显示剩余元素？
【发布时间】：2011-12-16 09:46:52
【问题描述】：

我有一个元素列表（比如说 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>

更新

这是我当前的代码：

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案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();

    });
});

【讨论】：

如何切换？我也希望它向上滑动。查看更新的代码。

【解决方案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;
}

【讨论】：