在手风琴引导程序中添加折叠答案

【问题标题】：Add collapse in accordion bootstrap在手风琴引导程序中添加折叠
【发布时间】：2016-05-03 02:12:00
【问题描述】：

如何在 bootstrap 手风琴中添加更多折叠项？我尝试基于引导模型来做到这一点。我只是复制粘贴了对应的div，但是这样不行。

我只是更改标题四的 id 名称和 aria-labelledby。我认为这还不够。

【问题讨论】：

除了手风琴的主 ID 之外，您必须更改每个 ID - 有几个。

【解决方案1】：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

id="accordion" 保持不变。

id="headingOne" - 每个面板

data-parent="#accordion" - 保持不变

href="#IDFROMPANELBODY"

id="collapseOne" = IDFROMPANELBODY - 每个面板

aria-labelledby - 来自“标题”的 ID (headingOne)

这就是为什么： headingOne-ID 仅用于 aria 的标签，href 和 collapseOne-ID 是最重要的 - 没有它将不起作用。 href 需要关注它所引用的面板主体。所以 panel-collapse-div 应该有每个面板自己的 ID。以及指向它的 href 链接。

这是第二个的示例：

<div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
              Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>

【讨论】：