如何显示列表的两个项目并折叠其他项目？答案

【问题标题】：How to show two items of a list and collapse the others?如何显示列表的两个项目并折叠其他项目？
【发布时间】：2017-09-05 09:12:58
【问题描述】：

我有一个从后端生成的列表：

<ul>
{% for element in  elements %}
  <li>{{element }}</li>
 {% endfor %}
</ul>

我只想显示前两个项目并折叠其他项目（也许点击链接“查看全部”会显示其余项目）

这可能吗？

【问题讨论】：

这里有一个不错且易于使用的 readmore 插件：jedfoster.com/Readmore.js 希望对您有所帮助:)
不要为此使用额外的插件，只需制作一个计数器来计算循环步骤并为 1 和 2 显示它们，否则将它们折叠起来
是的，有可能 - 到目前为止您尝试过什么？您可以使用 js 和一个 css 类来隐藏除前两个之外的所有内容。
一切皆有可能......先向我们展示您的代码。小提琴会更好
这是jsfiddle的链接

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

$(function(){
var limit = 1;

     $(".list-group-item").each(function(i) {
        if (i <= limit) {
          $(this).addClass('show');
        }else{
        	$(this).addClass('add-more');
        }
        $(this).not('.show').hide();
      });

})

  $('.see-emails').click(function() {
  	$('.add-more').show();
    $('a').hide();
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div id="collapseListGroup1">
  <ul class="list-group">

    <li class="list-group-item"> email1 </li>
    <li class="list-group-item"> email2 </li>
    <li class="list-group-item"> email3 </li>
    <li class="list-group-item"> email4 </li>
    <li class="list-group-item"> email 5</li>
  </ul>
</div>
<a class="collapsed see-emails" >
          See Emails
        </a>

【讨论】：

谢谢，但我想在前两封电子邮件中显示链接see emails，当我点击see emails 时，它会显示其余邮件（可能会将链接的标签更改为@987654325 @ 更重要
好的，我编辑了上面的 sn-p。请检查一次，还有更多工作要做。
嗨，这对我很有用。但是，.show 和 .add-more 类的 css 是什么？
实际上，如何修改它以使用引导折叠功能，而不添加额外的 js 类？