Question

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

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

我想只显示两个第一项并将其他项目展开（可能会有一个链接＆＃39;查看全部＆＃39;点击它时会显示剩下的项目）

这可能吗？

Answer 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>

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

1 个答案: