Bootstrap Accordion - 添加和删除父级

时间:2015-02-05 14:48:07

标签: javascript twitter-bootstrap accordion parent

我有一个带有大约10个面板的Bootstrap手风琴。我有一个复选框,需要完成以下任务:

未选中 - 所有面板都关闭,一次只显示一个面板(即:定义一个父级,以便当一个面板打开时另一个面板关闭)

选中 - 所有面板都打开并独立行动(即:未定义父级)

文档没有涵盖这种情况,我不知道如何实现这一目标。我尝试了以下内容(使用Bootstrap文档中显示的手风琴示例作为我的HTML代码)...

取消选中此复选框时运行的代码:

$(".collapse").collapse({ parent: "#accordion", toggle: false }, "hide");

选中复选框后对运行进行编码:

$(".collapse").collapse({ toggle: false }, "show");

然而,这似乎根本不起作用。例如,当运行第二个代码以显示所有面板时没有任何变化。我似乎在这里遗漏了一些东西。

1 个答案:

答案 0 :(得分:1)

您可以通过切换使用jQuery进行折叠/展开的data-parent上的a属性来执行此操作。添加这样的内容(假设您的复选框的ID为allowmulti):

$('#allowmulti').click(function() {
  if(this.checked) {
    $('#accordion a').removeAttr('data-parent');
  } else {
    $('#accordion a').attr('data-parent', '#accordion');
  }
});

示例Bootply here