Bootstrap - wie man eines der Listenelemente immer kollabiert macht

Question

Ich möchte eine Liste mit Bootstrap machen, wo immer das letzte geklickte Listenelement kollabiert ist. Im Anschluss an den Code aus https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse1" class="panel-collapse collapse in"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse2" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse3" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    </div> 
 
</div>

wenn zusammenklappbarer Gruppe 1 angeklickt wird, dann keines der Listenelemente ausgeblendet ist. Ich möchte, dass ein Element angeklickt wird, es kann nicht dekomprimiert werden. Ein Objekt sollte nur dann dekomprimiert werden, wenn ein anderes Listenelement ausgewählt ist. Wie kann ich sicherstellen, dass das zuletzt angeklickte Objekt immer minimiert wird, wenn also erneut geklickt wird, wird es nicht aufgelöst?

Answer 1

helfen. Aus den Kommentaren zu der Frage, Es klingt wie das Jquery ist in Ordnung, zu verwenden? (Geben Sie andernfalls eine Sprache an)

Ich verwende event.stopPropagation();, um zu verhindern, dass das Ereignis zu den standardmäßigen Bootstrap-Ereignis-Listenern übergeht.

$(document).ready(() => { 
 
    $("[data-toggle='collapse']").click(function(event) { 
 
    var index = $(this).index("[data-toggle='collapse']"); 
 
    if ($(".panel-collapse:eq(" + index + ")").is(":visible")) event.stopPropagation() 
 
    }); 
 
});

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

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse1" class="panel-collapse collapse in"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse2" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse3" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Bitte überprüfen Sie Angularjs Akkordeon. Im Folgenden Link könnte Hier ist ein jquery lösen für Ihr Problem

http://getbootstrap.com/javascript/#collapse-example-accordion