javascript - 用jQuery控制Bootstrap Accordion

我当前正在实现bootstrap手风琴小部件，并希望在每个面板的主体上放置一个元素，该元素允许我切换当前打开的面板（展开另一个面板并隐藏其他面板）。我目前正在通过使用jQuery通配符选择器折叠所有面板，然后显示我需要的面板来做到这一点：

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

由于某种原因，这似乎会影响打开和关闭面板的默认Bootstrap行为（面板最终保持打开状态，依此类推）。 Here是演示此问题的最小示例。是否有更好的方法来完成这样的事情？

提前致谢。

最佳答案

您必须等待“隐藏”，然后才能运行“显示”。 Here the updated fiddle.

如果有一个事件指示“隐藏”何时完成，可能会更干净。

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

关于javascript - 用jQuery控制Bootstrap Accordion ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42043501/