[英]How to collapse one of multiple cloned element in bootstrap collaps
我想折疊我從舊元素中克隆的另一元素。 但這會使我克隆的所有元素崩潰。
這是JS
$(document).on('click','#addEm,.collap', function (e) {
if($(this).is('#addEm')){
var employerForm = $(this).closest('#employer').find('#cloneEm');
var cloneDiv = employerForm.clone();
$('#employerList').append(cloneDiv);
}
if($(this).is('.collap')) {
if($(this).hasClass('glyphicon-plus')) {
$(this).removeClass('glyphicon-plus');
$(this).addClass('glyphicon-minus');
$(this).closest('#employer').find('.employerForm').collapse('hide');
}else if($(this).hasClass('glyphicon-minus')){
$(this).removeClass('glyphicon-minus');
$(this).addClass('glyphicon-plus');
$(this).closest('#employer').find('.employerForm').collapse('show');
}
}
});
HTML:
<div class="tab-pane" id="employer">
<div class="panel-body ">
<div class="text-right"><a id="addEm" class="btn btn-danger btn-md"> Add </a></div>
</div>
<div id="employerList">
</div>
<div class="panel-heading" id="cloneEm" style="margin-bottom: 15px;">
<div class="text-right"><a class="collap btn btn-danger btn-xs glyphicon glyphicon-plus"> </a></div>
<div class="panel-body">
<div class="collapse employerForm">
asdfasdfasdf
</div>
</div>
</div>
</div>
似乎您的選擇器定位到#employer
,這是環繞所有鏈接的列表。
定位#cloneEm
似乎可行。
$(document).on('click', '#addEm,.collap', function(e) { if ($(this).is('#addEm')) { var employerForm = $(this).closest('#employer').find('#cloneEm'); var cloneDiv = employerForm.clone(); $('#employerList').append(cloneDiv); } if ($(this).is('.collap')) { if ($(this).hasClass('glyphicon-plus')) { $(this).removeClass('glyphicon-plus'); $(this).addClass('glyphicon-minus'); $(this).closest('#cloneEm').find('.employerForm').collapse('hide'); } else if ($(this).hasClass('glyphicon-minus')) { $(this).removeClass('glyphicon-minus'); $(this).addClass('glyphicon-plus'); $(this).closest('#cloneEm').find('.employerForm').collapse('show'); } } });
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.js"></script> <div class="tab-pane" id="employer"> <div class="panel-body "> <div class="text-right"><a id="addEm" class="btn btn-danger btn-md"> Add </a></div> </div> <div id="employerList"> </div> <div class="panel-heading" id="cloneEm" style="margin-bottom: 15px;"> <div class="text-right"> <a class="collap btn btn-danger btn-xs glyphicon glyphicon-plus"> </a> </div> <div class="panel-body"> <div class="collapse employerForm"> asdfasdfasdf </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.