4

下面就来打破这个过程:引导手风琴展开/收起所有不正常

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

我还应该注意的是,如果你点击乐谱打开备份,它会打开面板,但关闭所有其他... – Murphy1976

+0

请检查我的回答,并给它一试。 – artemisian

+0

你确定吗?我无法在我的答案片段中重现问题。 – artemisian

回答

2

的问题是,所有面板的状态,因为这样手风琴作品比状态不同任何单一面板与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=属性和完全禁用手风琴行为。

+0

这仍然不能解决问题。请使用我上面说明的步骤,看看问题是什么。 – Murphy1976

+0

我更新了答案 – ZimSystem

+0

我看到这个..... – Murphy1976

0

如果你有能力从它存在的所有元素中删除数据父属性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>