Question

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

我可以通过按钮触发可折叠内容但我无法找到一种方法来阻止它们同时解除折叠：

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

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

Answer 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元素的直接子元素。

在引导程序折叠按钮

1 个答案: