Bootstrap折叠数据 – 父级无法正常工作

我正在使用bootstrap 2.2.1，无论出于何种原因，data-parent属性没有按预期执行。 当我点击另一个目标时，它不会关闭先前打开的目标。 这里有一个小提琴下面的代码，任何关于如何解决这个问题的想法？

 
 
 option 1 
 
 suboption 1
 
 suboption 1
 
 suboption 1
 
 
 
 option 2 
 
 option 3 
 
 option 4 
 
 suboption 1
 
 suboption 1
 
 suboption 1
 
 
 
  

Answer 1

我无法让这个工作 – 这可能是Bootstrap JS中的一些事情，你使用的是列表而不是div？

为了让它工作，我不得不重写click事件。 基于这个问题： 可折叠手风琴在dropdpwn菜单Bootstrap中不起作用

我为每个选项链接添加了一个accordion-toggle类，然后添加了以下JavaScript以使其工作：

 $(document).on('click', '.accordion-toggle', function(event) { event.stopPropagation(); var $this = $(this); var parent = $this.data('parent'); var actives = parent && $(parent).find('.collapse.in'); // From bootstrap itself if (actives && actives.length) { hasData = actives.data('collapse'); //if (hasData && hasData.transitioning) return; actives.collapse('hide'); } var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 $(target).collapse('toggle'); });​ 

这个小提琴显示它在行动。

Answer 2

它在Bootstrap文件中说：

如果提供了选择器，则在显示此可折叠项目时，将关闭指定父级下的所有可折叠元素。 （类似于传统的手风琴行为 – 这取决于panel类 ）

所以它必须与面板组一起使用，但你仍然可以覆盖javascript。

http://getbootstrap.com/javascript/#collapse-options

Answer 3

也一直在努力解决自助式崩溃问题。 我试图做一些稍微不同的事情。 我想要内联切换行为。 看下面我的JS小提琴。 我发现除了docs中包含的data-parent属性之外，bootstrap似乎还需要存在“accordion-group”div。 因此，要么JS中存在错误，要么他们的文档不包含它。 我也不得不把手风琴组的风格归零……

http://jsfiddle.net/cssguru/SRFFJ/

 
 
 
 Foo Bar...  Show Herp Derp  
 
 Herp Derp...  Show Foo Bar  
 
  

Answer 4

您必须在您的项目中使用accordion-group类，请参阅问题https://github.com/twitter/bootstrap/issues/4988