Bootstrap Accordion - 添加和删除父级答案

【问题标题】：Bootstrap Accordion - Adding and removing parentBootstrap Accordion - 添加和删除父级
【发布时间】：2015-02-05 23:29:05
【问题描述】：

我有一个带有大约 10 个面板的 Bootstrap 手风琴。我有一个复选框需要完成以下操作：

未选中 - 所有面板都关闭，并且一次只显示一个面板（即：定义了一个父面板，以便当一个面板打开时另一个面板关闭）

选中 - 所有面板都打开并独立运行（即：未定义父级）

文档没有涵盖这种情况，我不确定如何实现这一点。我尝试了以下方法（使用 Bootstrap 文档中显示的手风琴示例作为我的 HTML 代码）...

复选框未选中时运行的代码：

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

选中复选框时对运行进行编码：

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

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

【问题讨论】：

标签： javascript twitter-bootstrap accordion parent

【解决方案1】：

您可以通过切换a 上的data-parent 属性来执行此操作，该属性使用jQuery 进行折叠/展开。添加类似这样的内容（假设您的复选框的 ID 是 allowmulti）：

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

例如Bootply here

【讨论】：

不幸的是，这似乎不能 100% 工作...在您的 Bootply 示例中尝试以下操作...单击所有三个面板（以显示它们），然后单击复选标记...您'会注意到，即使 data-parent 属性已被删除，面板仍然表现得好像 parent 属性没有被删除。
有什么解决办法吗？ $('#accordion a').removeAttr('data-parent'); 删除了 data-parent 属性，但手风琴的行为仍然像它存在一样 - 不会切换到多开。