백엔드에서 생성 된 목록이 있습니다.
<ul>
{% for element in elements %}
<li>{{element }}</li>
{% endfor %}
</ul>
첫 번째 항목 두 개만 표시하고 나머지 항목은 축소하고 싶습니다 (클릭하면 '모두보기'링크가 표시되면 나머지 항목이 표시됨).
이것이 가능한가 ?
$(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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다