javascript - Bootstrap 可折叠组可以作为 Accordion 或不工作

Question

我使用 here 中的 Accordion 示例我尝试通过添加 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