html - Bootstrap Accordion 按钮切换 "data-parent"不工作

Question

我正在尝试使用 Bootstrap 3 创建 Accordion ，使用带有数据属性的可折叠按钮，没有 Accordion 标记。它对我来说看起来更干净。

但是我无法使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/

如果有人指出我犯的错误，我会很高兴:\

Answer 1

Bootstrap 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>

---

Bootstrap 3

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

在使用 data-parent 属性时，有一个“错误”使 Accordion 依赖于 .panel 类。要解决此问题，您可以将每个 Accordion 组包装在一个“面板”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=
的元素的直接子元素
• 每个 Accordion 部分 (data-toggle=) 必须是 .panel ( http://www.bootply.com/AbiRW7BdD6# ) 的直接子级