在引导折叠按钮上禁用多选[重复]答案

【问题标题】：disable multiselect on bootstrap collapse buttons [duplicate]在引导折叠按钮上禁用多选[重复]
【发布时间】：2016-08-27 15:21:16
【问题描述】：

我正在尝试找到一种方法来实现引导按钮，该按钮将显示可折叠的内容，而不允许在任何时候显示多个按钮的内容。

我可以让按钮触发可折叠内容，但我找不到阻止它们同时不折叠的方法：

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button 1
  </a>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
    Button 2
  </a>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-block">
    Here is some example text
  </div>
</div>

<div class="collapse" id="collapseExample2">
  <div class="card card-block">
    Here is some example text, too
  </div>
</div>

js 小提琴演示在这里：https://jsfiddle.net/hzs68sne/

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

您想要实现的目标类似于 collapse accordion。

要使用当前设置执行此操作，您可以将整个组包装在单个 .panel div 中并使用 data-parent 属性。

<div id="container">
  <div class="panel">
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" data-parent="#container">
          Button 1
        </a>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" data-parent="#container">
          Button 2
        </a>
    </p>

    <div class="collapse" id="collapseExample">
      <div class="card card-block">
        Here is some example text
      </div>
    </div>

    <div class="collapse" id="collapseExample2">
      <div class="card card-block">
        Here is some example text, too
      </div>
    </div>

  </div>
</div>

JSFiddle 演示：https://jsfiddle.net/gbfb32z9/

记住：

.panel div 必须是 data-parent 元素的直接子元素。
.collapse 元素是 .panel 元素的直接子元素。

【讨论】：