Bootstrap Accordion按钮切换“数据父级”不起作用

小编典典

Bootstrap Accordion按钮切换“数据父级”不起作用

html

我正在尝试使用Bootstrap 3创建一个手风琴，该手风琴使用可折叠的data属性按钮，而没有手风琴标记。对我来说看起来更干净。

但是，我无法使 data-parent属性正常工作。我要在打开一个问题时关闭所有其他问题。我正在阅读文档），但仍然无法正常工作。

我正在使用以下代码：

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

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

阅读 283

2020-05-10

共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上查看此问题：

.panel使用该data-parent属性时，有一个“bug”使手风琴依赖于类。要解决此问题，您可以将每个手风琴组包装在一个“面板” 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#）的直接子级

2020-05-10