Bootstrap 可折叠组是否可以用作手风琴

Question

我使用 here 中的手风琴示例，并尝试通过添加 2 个按钮来扩展用户选择的多个或单个面板，使用 jquery，删除属性'data-parent'或重新添加

这是我的实现here

所有的工作都是这样完成的：

$('#expandSingle').on('click', function () { 
  $('.accordion-toggle').attr('data-parent', '#accordion');
});

$('#expandMulti').on('click', function () { 
  $('.accordion-toggle').removeAttr('data-parent'); 
});

奇怪的事情是，如果我手动（没有jquery），删除'data-parent'并刷新，我得到我想要的结果，面板变得全部可折叠。当我通过页面上的 jquery 执行此操作时，它有奇怪的行为，但不起作用...

有什么想法吗？

Answer 1

它不起作用，因为折叠组件已经用 #accordion 初始化为 data-parent。

您可以像这样重新初始化组件并重置数据属性..

$('#expandSingle').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:'#accordion'});
});

$('#expandMulti').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:false});
});

演示：http://bootply.com/dSZVY2hphO

Answer 2

根据Skelly的回答，我做了一些改进：

$('#expandSingle').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:'#accordion', toggle:false});
});

$('#expandMulti').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:false, toggle:false});
});

我刚刚在 collapse() 上添加了 toggle:false 选项，因此我摆脱了从单一模式切换到多重模式时这种恼人的切换。

演示：http://www.bootply.com/8EZ1WjgxSX

Bootstrap 可折叠组是否可以用作手风琴

Bootstrap Collapsible Group that can work as Accordion or not

javascript

accordion

twitter-bootstrap