我正在尝试使用Bootstrap 3创建一个手风琴，使用可折叠的数据属性按钮，没有手风琴标记。它对我来说看起来更干净。
但是我无法使data-parent属性起作用。我想在打开一个问题时，其他所有人都要关闭。我正在阅读文档（http://getbootstrap.com/javascript/#collapse-usage），但仍然无法使其工作。
我正在使用以下代码：
<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>
这是JSFiddle：http://jsfiddle.net/twinsen/AEew4/
如果有人指出我犯了错误，我会很高兴：
Bootstrap 4
在collapse元素（而不是trigger元素）上使用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
在GitHub上看到这个问题：https://github.com/twbs/bootstrap/issues/10966
当使用.panel属性时，有一个“bug”使得手风琴依赖于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>
编辑
正如评论中所提到的，每个部分都不一定是.panel。然而...
.panel必须是用作data-parent=的元素的直接子data-toggle=）必须是.panel（http://www.bootply.com/AbiRW7BdD6#）的直接孩子注意，不仅存在对.panel的依赖，它还依赖于DOM结构。
确保您的元素结构如下：
<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">
...
它基本上是@Blazemonger所说的，但我认为目标元素的层次结构也很重要。我没有完成所有可能性，但基本上它应该工作，如果你遵循这种层次结构。
仅供参考，我在控制div和内容div之间有更多层，但是没有用。
试试这个。简单的解决方案，没有依赖性。
$('[data-toggle="collapse"]').click(function() {
$('.collapse.in').collapse('hide')
});正如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');
})
})
如果发现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');
})
})
如果您有嵌套面板，那么您可能还需要通过添加另一个类名来指定哪些类别以区分它们并将其添加到上述JavaScript中的选择器
这是我为解决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');
});
});
编辑：下面是一个简化的答案，仍然满足我的需求，我现在使用委托的点击处理程序：
$(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');
});
切换手风琴时遇到了同样的问题。但是当我尝试将脚本块放在标题块中时，它适用于我的情况！
<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>