[英]Bootstrap Accordion Expand/Collapse All not functioning properly
這是打破這個的過程:
請注意 Music Notation 不會重新打開,即使您應該能夠在函數中看到,邏輯表明所有面板都已關閉並且應該打開。 為什么? 我究竟做錯了什么?
HTML:
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
<div class="panel-body">BETA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatAudio">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
</a>
</h4>
</div>
<div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">GAMMA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatNotation">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
</a>
</h4>
</div>
<div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">DELTA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatVideo">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
</a>
</h4>
</div>
<div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">EPSILON</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatInteractive">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
</a>
</h4>
</div>
<div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ZETA</div>
</div>
</div>
</div>
JS:
var toggleFormat = false;
$('#expandAllFormats').on('click', function(e) {
e.preventDefault();
console.log(toggleFormat);
$("#accordionFormat .panel-collapse").each(function(index, value){
if (toggleFormat){
if($(this).hasClass('in')){
$(this).collapse('toggle');
console.log("This panel is open. it will be closed");
} else {
console.log("This panel is closed. it will stay closed");
}
} else {
if(!$(this).hasClass('in')){
$(this).collapse('toggle');
console.log("This panel is closed. it will be open");
} else {
console.log("This panel is open. it will stay open");
}
}
});
toggleFormat = toggleFormat ? false : true;
});
問題是所有面板的狀態都不同於任何單個面板的狀態,因為手風琴與data-parent
。 您的展開/折疊所有按鈕處理程序需要完全覆蓋正常的手風琴行為。
expand/collapse all點擊處理程序必須跟蹤最后一個狀態(expand all或 collapse all ),因為 Bootstrap Collapse 組件單獨處理每個面板的狀態(一次只打開一個)。 否則,將無法知道是打開還是關閉單獨切換的面板。
$('#expandAllFormats').on('click', function () {
if ($(this).data("lastState") === null || $(this).data("lastState") === 0) {
// close all
$('.collapse.in').collapse('hide');
// next state will be open all
$(this).data("lastState",1);
$(this).text("Expand All");
}
else {
// initial state...
// override accordion behavior and open all
$('.panel-collapse').removeData('bs.collapse')
.collapse({parent:false, toggle:false})
.collapse('show')
.removeData('bs.collapse')
// restore single panel behavior
.collapse({parent:'#accordionFormat', toggle:false});
// next state will be close all
$(this).data("lastState",0);
$(this).text("Collapse All");
}
});
http://codeply.com/go/76Hl6s49rb
OFC,另一種方法是簡單地刪除data-parent=
屬性並完全禁用手風琴行為。
如果您有能力從存在的所有元素中刪除 data-parent 屬性data-parent="#accordionFormat"
它將解決您的問題。
為什么? 我不確定,但似乎該屬性觸發了一些與折疊功能混亂的邏輯。
var toggleFormat = false; $('#expandAllFormats').on('click', function (e) { e.preventDefault(); console.log(toggleFormat); $("#accordionFormat .panel-collapse").each(function (index, value) { if (toggleFormat) { if ($(this).hasClass('in')) { $(this).collapse('toggle'); console.log("This panel is open. it will be closed"); } else { console.log("This panel is closed. it will stay closed"); } } else { if (!$(this).hasClass('in')) { $(this).collapse('toggle'); console.log("This panel is closed. it will be open"); } else { console.log("This panel is open. it will stay open"); } } }); toggleFormat = toggleFormat ? false : true; });
<html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button> <div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a id="accordionformatText" role="button" data-toggle="collapse" href="#formatText"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text </a> </h4> </div> <div id="formatText" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body">ALPHA</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" href="#formatArt"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art </a> </h4> </div> <div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel"> <div class="panel-body">BETA</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" href="#formatAudio"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio </a> </h4> </div> <div id="formatAudio" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body">GAMMA</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse" href="#formatNotation"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation </a> </h4> </div> <div id="formatNotation" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body">DELTA</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" href="#formatVideo"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video </a> </h4> </div> <div id="formatVideo" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body">EPSILON</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse" href="#formatInteractive"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive </a> </h4> </div> <div id="formatInteractive" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body">ZETA</div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.