Bootstrap Akkordeon Expandieren/Alles schließen nicht richtig

funktionierende

Hier ist der Prozess, dies zu brechen:Bootstrap Akkordeon Expandieren/Alles schließen nicht richtig

klicken Music Notation
Klick aus-/einklappen
klicken Music Notation
Klick Expand/Collapse All
Klick erweitern/reduzieren erneut alle

Beachten Sie, dass Music Notation die Sicherung NICHT öffnet, obwohl Sie in der Funktion sehen können, dass die Logik besagt, dass ALLE Anzeigen geschlossen sind und sich öffnen sollten. WARUM? Was mache ich falsch?

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

Quelle

2017-03-01 Murphy1976

Ich sollte auch beachten, dass, wenn Sie Musik-Notation klicken, dass bis zu öffnen zurück, wird es einer Panel öffnen, aber alle anderen Teil ... – Murphy1976

Bitte überprüfen Sie meine Antwort und geben ein Versuch. – artemisian

Bist du sicher? Ich kann das Problem im Snippet meiner Antwort nicht reproduzieren. – artemisian

Das Problem ist, dass der Zustand der alle Platten anders als der Zustand der jede einzelne Panel wegen der Akkordeon Werke Weg mit data-parent. Der Alles-Button-Button zum Erweitern/Reduzieren muss das normale Akkordeon-Verhalten vollständig überschreiben.

Das Aufklappen/Zuklappen alle Click-Handler muss Spur des letzten Zustand halten (erweitern alle oder Zusammenbruch alle), da die Bootstrap Collapse Komponente separat übergibt den Zustand jeder einzelnen Platte (nur eine nach der anderen geöffnet). Sonst gäbe es keine Möglichkeit zu wissen, ob die einzeln getoggten Panels geöffnet oder geschlossen werden sollen.

$('#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, ist eine andere Art und Weise einfach die data-parent= Attribute zu entfernen und vollständig das Akkordeon Verhalten deaktivieren.

Quelle

2017-03-01 17:41:48 ZimSystem

Dies ist immer noch nicht das Problem zu lösen. Bitte verwenden Sie die oben beschriebenen Schritte, um zu sehen, was das Problem ist. – Murphy1976

Ich habe die Antwort aktualisiert – ZimSystem

Ich sehe das ..... – Murphy1976

Wenn Sie es sich leisten können, das Daten-Eltern-Attribut data-parent="#accordionFormat" von allen Elementen zu entfernen, wo es existiert, wird es Ihr Problem lösen.

Warum? Ich bin mir nicht sicher, aber es scheint, dass dieses Attribut eine Logik auslöst, die die Funktionalität zum Zusammenbruch beeinträchtigt.

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>

Quelle

2017-03-01 19:16:10 artemisian

Bootstrap Akkordeon Expandieren/Alles schließen nicht richtig

Antwort

Verwandte Themen