javascript - Bootstrap Accordion - 添加和删除父级

Question

我有一个 Bootstrap Accordion ，大约有 10 个面板。我有一个复选框需要完成以下任务:

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

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

文档没有涵盖这种情况，我不知道如何实现这一点。我尝试了以下操作(使用 Bootstrap 文档中显示的 Accordion 示例作为我的 HTML 代码)...

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

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

在选中复选框时对运行进行编码:

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

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

Answer 1

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

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

示例 Bootply here