Question

我使用here中的Accordion示例，我尝试通过添加2个按钮来扩展多个或单个Panel（由用户选择），使用jquery删除Attribute＆＃39;数据-parent＆＃39;或者再添加一次。

这是我的实施here

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

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

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

怪异的事情是，如果我手动（没有jquery），请删除＆＃39; data-parent＆＃39;并刷新，我得到我想要的结果，面板成为所有可折叠的。当我通过页面上的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选项，所以当从Single切换到Multi时，我摆脱了这种恼人的切换。

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

可以作为手风琴使用的Bootstrap可折叠组

2 个答案: