Html 禁用引导折叠按钮上的multiselect

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

我可以使用按钮触发可折叠内容，但我无法找到一种方法来阻止它们同时被取消折叠：

<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 fiddle演示：

您想要实现的目标看起来像

要在当前设置中执行此操作，您可以将整个组包装在一个

.panel div

中，并使用

数据父项

属性

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

下面是一些示例文本
这里还有一些示例文本

JSFIDLE演示：

请记住：

• .panel div

  需要是

  数据父元素的直接子元素

• .collapse

  元素是

  .panel

  元素的直接子元素