Bootstrap Accordion 按钮切换“data-parent”不起作用

Question

我正在尝试使用 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/

如果有人指出我犯了错误，我会很高兴：

原文由 Ziik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导程序 4

在折叠元素（而不是触发元素）上使用 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>

---

引导程序 3

在 GitHub 上查看此问题： https ://github.com/twbs/bootstrap/issues/10966

当使用 data-parent 属性时，有一个“错误”使手风琴依赖于 .panel 类。要解决它，您可以将每个手风琴组包装在一个“面板”div 中。

http://bootply.com/88288

 <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# ）的直接孩子

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

请注意，不仅依赖于 .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 之间有更多层，但没有用。

原文由 jtlai 发布，翻译遵循 CC BY-SA 4.0 许可协议