Collapse Bootstrap-Registerkarten - kann nicht aktivieren .active tab-Klasse

Question

Ich benutze (formatiert) Bootstrap-Registerkarten

Ich möchte Bootstrap-Registerkarten schließen, wenn Sie erneut darauf klicken.

Es funktioniert teilweise, ich kann das entsprechende Panel schließen, aber wenn ich die 'aktive' Klasse der Registerkarte umschalten will, funktioniert Skript nicht.

Mein JS-Code:

$('[data-toggle=tab]').click(function(e){ 
    if($(this).parent().hasClass('active')){ 
     e.preventDefault(); 

     // toggle 'active' tab class (styling) 
     $(this).parent().toggleClass('active'); 

     // toggle 'active' panel class (hide it) 
     $($(this).attr("href")).toggleClass('active'); 
    } 
}) 

Alle Code (html, css, js) sichtbar ist hier: https://jsfiddle.net/j9stkqf6/1/

Wenn Sie kommentieren:

$(this).parent().toggleClass('active'); 

das Panel versteckt

Ich habe auch versucht, Schritt/Schritt Debug-Modus Alles funktioniert gut unt il Ende der JS-Funktion, alle wieder erscheinen (tab.aktive Klasse und Panel)

Können Sie mir helfen, Panel zu schließen UND Registerkarte "aktive" Klasse umschalten, wenn Sie erneut auf Registerkarte klicken.

Danke! Hier

Answer 1

Endlich habe ich es funktioniert:

musste ich hinzufügen 'e.stopPropagation()' zu meinem Javascript zusätzlich zu 'e.preventDefault()'

‚e.preventDefault ()‘auf dieses Ereignis die Aktion von Bootstrap stoppen (klicken Sie auf einen Link)

'e.stopPropagation()' vermeiden andere Aktionen aus Bootstrap (Fang, klicken Sie auf LI)

vgl e.preventDefault() vs e.stopPropagation()

$('[data-toggle=tab]').click(function(e){ 
    if($(this).parent().hasClass('active')){ 

    e.preventDefault(); 
    e.stopPropagation(); 

     $(this).parent().removeClass('active'); 

     $($(this).attr("href")).removeClass('active'); 
     $($(this).attr("href")).removeClass('in'); 

     $(this).attr("aria-expanded", false); 
    } 
}) 

Sie können mein Arbeitsbeispiel hier sehen: https://jsfiddle.net/j9stkqf6/10/

Answer 2

ist das beigefügte Demo, die Ihnen helfen

Methode 1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading " role="tab" id="headingOne"> 
 
      <h4 class="panel-title"> 
 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne"> 
 
        <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 1</strong> 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <!--To make by defualt open a any panel put class "in" (without quotes)--> 
 
     <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
      <div class="panel-body"> 
 
       Link 1 Link 1 Link 1 Link 1 Link 1 Link 1 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading" role="tab" id="headingTwo"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo"> 
 
        <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 2</strong> 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
      <div class="panel-body"> 
 
       Link 2 Link 2 Link 2 Link 2 Link 2 Link 2 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading" role="tab" id="headingThree"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree"> 
 
        <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 3</strong> 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
      <div class="panel-body"> 
 
       Link 3 Link 3 Link 3 Link 3 Link 3 Link 3 Link 3 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Methode 2

alle kollabieren zusammen können Sie auch Somethi Wenn Sie möchten, können Sie alle Navs, die die Klasse "in" haben, ausblenden, da die geöffnete reduzierbare Klasse "in" hinzugefügt wurde. Sie fangen sie mit Hilfe von unten Skript schließen Sie diese.

$('#accordion .collapse').on('show.bs.collapse', function (e) { 
     $('#accordion .in').collapse('hide'); 
    });