Bootstrap-Akkordeon mit jQuery steuern

Question

Ich implementiere gerade ein Bootstrap-Akkordeon-Widget und möchte ein Element auf jedem Panel-Körper platzieren, das es mir erlaubt, das gerade geöffnete Panel zu wechseln (erweitert ein anderes und verbirgt die anderen). Ich tue dies derzeit durch einen jQuery Wildcard Selektor alle Platten zusammenbrechen, und dann die, zeigte, ich brauche:

$(".displayPanel").click((e) => { 
    $("[id^='collapse']").collapse('hide'); 
    $("#collapse" + e.target.text).collapse('show'); 
}) 

Aus irgendeinem Grunde dies das Standard-Bootstrap Verhalten der Öffnung zu beeinflussen scheint und Schließplatten (Panels bleiben offen, usw.). Here ist ein minimales Beispiel, um das Problem zu veranschaulichen. Gibt es einen besseren Weg, um so etwas zu erreichen?

Vielen Dank im Voraus.

Answer 1

Sie müssen auf "ausblenden" warten und dann können Sie "show" ausführen. Here the updated fiddle.

Wahrscheinlich wäre es sauberer, wenn es ein Ereignis gibt, das angibt, wann "Verstecken" abgeschlossen ist.

$(".displayPanel").click((e) => { 
    $("[id^='collapse']").collapse('hide'); 
    setTimeout(function(){ 
    $("#collapse" + e.target.text).collapse('show'); 
    },1000); 
});