用jQuery控制Bootstrap手風琴

Question

我當前正在實現bootstrap手風琴小部件，並希望在每個面板的主體上放置一個元素，該元素允許我切換當前打開的面板（展開另一個面板並隱藏其他面板）。 我目前正在通過使用jQuery通配符選擇器折疊所有面板，然后顯示我需要的面板來做到這一點：

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

由於某種原因，這似乎會影響打開和關閉面板的默認Bootstrap行為（面板最終保持打開狀態，依此類推）。 這是一個演示該問題的最小示例。 是否有更好的方法來完成這樣的事情？

提前致謝。

Answer 1

您必須等待“隱藏”，然后才能運行“顯示”。 這里是更新的小提琴。

如果有一個事件指示“隱藏”何時完成，可能會更干凈。

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