用jQuery控制bootstrap手风琴

时间:2017-02-04 17:46:40

标签: javascript jquery twitter-bootstrap

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

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

出于某种原因,这似乎会影响打开和关闭面板的默认Bootstrap行为(面板最终会打开,等等)。 Here是证明问题的最小例子。有没有更好的方法来完成这样的事情?

提前致谢。

1 个答案:

答案 0 :(得分:1)

你必须等待“隐藏”,然后才能运行“show”。 Here the updated fiddle.

如果有一个事件表明“隐藏”已经完成,可能会更清洁。

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