引導手風琴展開/收起所有不正常

Question

下面就來打破這個過程：

1. 點擊樂譜
2. 點擊展開/收起所有
3. 點擊樂譜
4. 點擊展開/收起所有
5. 再次點擊展開/收起全部

請注意，如果音樂符號不會打開備份，即使您應該能夠在該功能中看到該邏輯表示所有面板都已關閉並且應該打開。爲什麼？我究竟做錯了什麼？

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; 
    }); 

Answer 1

的問題是，所有面板的狀態，因爲這樣手風琴作品比狀態不同任何單一面板與data-parent。您的展開/摺疊全部按鈕處理程序需要完全覆蓋該正常的手風琴行爲。

展開/摺疊所有單擊處理必須跟蹤上一個狀態（擴大所有或崩潰所有），因爲引導收起組件seperately遞給每個單面板的狀態（只一次打開）。 否則，將無法知道是否打開或關閉單獨切換的面板。

$('#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://www.codeply.com/go/76Hl6s49rb

OFC，另一種方式是簡單地刪除data-parent=屬性和完全禁用手風琴行爲。

Answer 2

如果你有能力從它存在的所有元素中刪除數據父屬性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>