0
我想做手風琴摺疊/摺疊,但是我沒有設置它是一個相關的,標準的摺疊/摺疊很好,如果手風琴效果很麻煩,但是我希望它顯示最初所有領域崩潰。bootstrap手風琴已全部摺疊
請記住,我正在做一個循環來創建每一個,這可能是無關緊要的,因爲我可以在第一個循環中添加一個不同的ID,類沒有問題,但只是值得一提。
所以我有這樣的:
<div class="row">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Title1
</a>
</h5>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Content1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Title2
</a>
</h5>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
Content2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Title3
</a>
</h5>
</div>
<div id="collapse3" class="panel-collapse collapse in">
<div class="panel-body">
Content3
</div>
</div>
</div>
</div>
</div>
然後,我有以下腳本
<script>
$(function() {
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('.collapse-init').on('click', function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse.in').removeClass('in');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$('.panel-title > a').removeAttr('data-toggle');
$(this).html('Click to enable accordion behavior');
}
});
});
</script>
我已經與它周圍的鍍鉻編輯搞砸從崩潰崩潰嘗試和編輯類反之亦然,但沒有任何東西似乎迫使它們全部崩潰。一個總是保持開放。