Html Bootstrap 手风琴按钮切换“数据父级”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19425165/
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 Accordion button toggle "data-parent" not working
提问by Ziik
I'm trying to create an accordion using Bootstrap 3 using the button collapsible with the data attribute, without the accordion markup. It just looks more cleaner to me.
我正在尝试使用 Bootstrap 3 创建一个手风琴，使用带有 data 属性的可折叠按钮，没有手风琴标记。对我来说它看起来更干净。
However I cannot make the data-parentattribute to work. I want when opening a question, all others to close. I'm reading the docs ( http://getbootstrap.com/javascript/#collapse-usage) but still cannot get it to work.
但是我无法使data-parent属性起作用。我想在打开一个问题时，关闭所有其他问题。我正在阅读文档（http://getbootstrap.com/javascript/#collapse-usage）但仍然无法让它工作。
I'm using the following code:
我正在使用以下代码：
<div class="accordion" id="myAccordion">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
<p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
<p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
<p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
</div>
</div>
Here is the JSFiddle: http://jsfiddle.net/twinsen/AEew4/
这是 JSFiddle：http: //jsfiddle.net/twinsen/AEew4/
I'll be very happy if someone points to me where I'm making a mistake :\
如果有人指出我犯错的地方，我会很高兴：\
回答by Zim
Bootstrap 4
引导程序 4
Use the data-parent=""attribute on the collapse element (instead of the trigger element)
使用data-parent=""折叠元素上的属性（而不是触发器元素）
<div id="accordion">
<div class="card">
<div class="card-header">
<h5>
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
Collapsible #1 trigger
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Collapsible #1 element
</div>
</div>
</div>
... (more cards/collapsibles inside #accordion parent)
</div>
Bootstrap 3
引导程序 3
See this issue on GitHub: https://github.com/twbs/bootstrap/issues/10966
在 GitHub 上查看此问题：https: //github.com/twbs/bootstrap/issues/10966
There is a "bug" that makes the accordion dependent on the .panelclass when using the data-parentattribute. To workaround it, you can wrap each accordion group in a 'panel' div..
有一个“错误”使手风琴.panel在使用data-parent属性时依赖于类。要解决此问题，您可以将每个手风琴组包装在一个“面板”div 中。
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>
Edit
编辑
As mentioned in the comments, each section doesn't have to be a .panel. However...
正如评论中提到的，每个部分不必是.panel. 然而...
.panelmust be a direct child of the element used asdata-parent=- each accordion section (
data-toggle=) must be a direct child of the.panel(http://www.bootply.com/AbiRW7BdD6#)
.panel必须是用作元素的直接子元素data-parent=- 每个手风琴部分 (
data-toggle=) 必须是.panel( http://www.bootply.com/AbiRW7BdD6#)的直接子级
回答by jtlai
Note, not only there is dependency on .panel, it also has dependency on the DOM structure.
注意，不仅依赖于 .panel，还依赖于 DOM 结构。
Make sure your elements are structured like this:
确保您的元素结构如下：
<div id="parent-id">
<div class="panel">
<a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>
<div id="opt1" class="collapse">
...
It's basically what @Blazemonger said, but I think the hierarchy of the target element matters too. I didn't finish trying every possibility out, but basically it should work if you follow this hierarchy.
这基本上是@Blazemonger 所说的，但我认为目标元素的层次结构也很重要。我没有尝试完所有的可能性，但如果你遵循这个层次结构，基本上它应该可以工作。
FYI, I had more layers between the control div & content div and that didn't work.
仅供参考，我在控制 div 和内容 div 之间有更多层，但这不起作用。
回答by Melih
Try this. Simple solution with no dependencies.
尝试这个。没有依赖性的简单解决方案。
$('[data-toggle="collapse"]').click(function() {
$('.collapse.in').collapse('hide')
});回答by Krzysztof Grzybek
As Blazemonger said, #parent, .panel and .collapse have to be direct descendants. However, if You can't change Your html, You can do workaround using bootstrap events and methods with the following code:
正如 Blazemonger 所说，#parent、.panel 和 .collapse 必须是直接后代。但是，如果您无法更改您的 html，则可以使用以下代码使用引导事件和方法来解决方法：
$('#your-parent .collapse').on('show.bs.collapse', function (e) {
var actives = $('#your-parent').find('.in, .collapsing');
actives.each( function (index, element) {
$(element).collapse('hide');
})
})
回答by kernowcode
If found this alteration to Krzysztof answer helped my issue
如果发现对 Krzysztof 答案的这种更改对我的问题有帮助
$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {
var all = $('#' + parentId).find('.collapse');
var actives = $('#' + parentId).find('.in, .collapsing');
all.each(function (index, element) {
$(element).collapse('hide');
})
actives.each(function (index, element) {
$(element).collapse('show');
})
})
if you have nested panels then you may also need to specify which ones by adding another class name to distinguish between them and add this to the a selector in the above JavaScript
如果您有嵌套面板，那么您可能还需要通过添加另一个类名来指定哪些面板以区分它们并将其添加到上述 JavaScript 中的 a 选择器
回答by craigrs84
Here is a (hopefully) universal patch I developed to fix this problem for BootStrap V3. No special requirements other than plugging in the script.
这是我为解决 BootStrap V3 的这个问题而开发的（希望如此）通用补丁。除了插入脚本没有特殊要求。
$(':not(.panel) > [data-toggle="collapse"][data-parent]').click(function() {
var parent = $(this).data('parent');
var items = $('[data-toggle="collapse"][data-parent="' + parent + '"]').not(this);
items.each(function() {
var target = $(this).data('target') || '#' + $(this).prop('href').split('#')[1];
$(target).filter('.in').collapse('hide');
});
});
EDIT:Below is a simplified answer which still meets my needs, and I'm now using a delegated click handler:
编辑：下面是一个仍然满足我需求的简化答案，我现在使用的是委托点击处理程序：
$(document.body).on('click', ':not(.panel) > [data-toggle="collapse"][data-parent]', function() {
var parent = $(this).data('parent');
var target = $(this).data('target') || $(this).prop('hash');
$(parent).find('.collapse.in').not(target).collapse('hide');
});
回答by Enix
I got the same problem when toggling the accordion. But when I try to put the script block in the header block, it works for my case!!
切换手风琴时我遇到了同样的问题。但是当我尝试将脚本块放在标题块中时，它适用于我的情况！！
<head>
...
<link rel="stylesheet" href="../assets/css/bootstrap.css" />
<script src="../assets/js/jquery-1.9.1.min.js" ></script>
<script src="../assets/js/bootstrap.js" ></script>
</head>
