Bootstrap 3手风琴button切换“data-parent”不起作用
我试图用折叠的数据属性button来创build一个使用Bootstrap 3的手风琴，没有手风琴的标记。 我看起来更清洁。
但是我不能让数据父项属性工作。 我想在开个问题的时候，所有的人都closures。 我正在阅读文档（ 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/
如果有人指出我犯了什么错误，我会非常高兴：\
在GitHub上看到这个问题： https ： //github.com/twbs/bootstrap/issues/10966
在使用data-parent属性时，有一个“bug”使手风琴依赖于.panel类。 要解决这个问题，你可以将每个手风琴组包装在一个“面板”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的直接.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"> ...
这基本上就是布拉泽曼所说的，但我认为目标元素的层次也很重要。 我没有完成所有的可能性，但基本上它应该工作，如果你遵循这个层次。
仅供参考，我有更多的控制div和内容div之间的层，并没有工作。
正如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'); }) })
尝试这个。 简单的解决scheme，无需依赖。
$('[data-toggle="collapse"]').click(function() { $('.collapse.in').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中的select器
切换手风琴时遇到同样的问题。 但是，当我尝试把脚本块放在标题块，它适用于我的情况！
<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>
