jQuery Bootstrap 折叠数据父级不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13665800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap collapse data-parent not working
提问by mfreitas
I'm using bootstrap 2.2.1 and for whatever reason the data-parent attribute is not doing what is intended. It does not close a previous opened target when i click another target. Here's a fiddlewith the code below, any ideas on how to fix this ?
我正在使用 bootstrap 2.2.1，无论出于何种原因，data-parent 属性都没有按预期执行。当我单击另一个目标时，它不会关闭以前打开的目标。这是下面的代码的小提琴，关于如何解决这个问题的任何想法？
<div id="accordion">
<ul>
<li>
<a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
<ul id="document" class="collapse">
<li> <a href="#">suboption 1</a></li>
<li> <a href="#">suboption 1</a></li>
<li> <a href="#">suboption 1</a></li>
</ul>
</li>
<li>
<a href="#">option 2</a>
</li>
<li>
<a href="#">option 3</a>
</li>
<li>
<a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
<ul id="document2" class="collapse">
<li> <a href="#">suboption 1</a></li>
<li> <a href="#">suboption 1</a></li>
<li> <a href="#">suboption 1</a></li>
</ul>
</li>
</ul>
</div>
采纳答案by mccannf
I couldn't get this to work either - this may be something in the Bootstrap JS related to the fact that you are using lists rather than divs?
我也无法让它工作 - 这可能是 Bootstrap JS 中与您使用列表而不是 div 的事实有关的东西？
So to get it to work, I had to override the click event. Based on this question here: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap
所以为了让它工作，我不得不覆盖点击事件。基于这里的这个问题：可折叠手风琴在 dropdpwn-menu Bootstrap 中不起作用
I added an accordion-toggleclass to each option link, and then added the following JavaScript to get it to work:
我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');
});?
This fiddleshows it in action.
这个小提琴在行动中展示了它。
回答by Ian Zhao
It says in the Bootstrap Documents:
它在 Bootstrap 文档中说：
If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the
panelclass)
如果提供了选择器，则当显示此可折叠项目时，将关闭指定父项下的所有可折叠元素。（类似于传统的手风琴行为 -这取决于
panel类）
so it has to be used with panel-groups, but you can override the javascript anyway.
所以它必须与面板组一起使用，但无论如何你都可以覆盖 javascript。
回答by Adam Youngers
've been struggling with bootstrap collapse as well. I was trying to something do something slightly different. I wanted inline toggle behavior. See my JS fiddle below. What I found is that bootstrap seems to require the existence of the "accordion-group" div in addition to the data-parent attribute covered in their docs. So either there is a bug in the JS or their docs do not include it. I also had to zero out the styles on the accordion-group div...
也一直在努力解决 bootstrap 崩溃问题。我试图做一些稍微不同的事情。我想要内联切换行为。请参阅下面的我的 JS 小提琴。我发现除了他们的文档中涵盖的 data-parent 属性之外，bootstrap 似乎还需要存在“accordion-group”div。因此，要么 JS 中存在错误，要么他们的文档不包含它。我还必须将手风琴组 div 上的样式归零...
http://jsfiddle.net/cssguru/SRFFJ/
http://jsfiddle.net/cssguru/SRFFJ/
<div id="accordion2">
<div class="accordion-group" style="border:0;padding:0;margin:0">
<div id="collapseOne" class="collapse in">
Foo Bar...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Show Herp Derp
</a>
</div>
<div id="collapseTwo" class="collapse">
Herp Derp...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Show Foo Bar
</a>
</div>
</div>
</div>
回答by vargat
You have to use accordion-group class in your items, see issue https://github.com/twitter/bootstrap/issues/4988
您必须在您的项目中使用手风琴组类，请参阅问题https://github.com/twitter/bootstrap/issues/4988
