Bootstrap 4 | 展开其他部分时折叠

Question

我正在研究bootstrap 4 Collapse.当一个扩展时,想要折叠其他部分

到目前为止我做的是:

HTML

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    content 1
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
    Content 2
  </button>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Content one here
  </div>
</div>
<div class="collapse" id="collapseExample2">
  <div class="card card-body">
    Content 2 here
  </div>
</div>

现场演示:现场演示

Answer 1

利用data-parent属性:

<div class="container" id=myGroup>
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            content 1
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
    </p>

    <div class="collapse" id="collapseExample" data-parent="#myGroup">
        <div class="card card-body">
            Content one here
        </div>
    </div>
    <div class="collapse" id="collapseExample2" data-parent="#myGroup">
        <div class="card card-body">
            Content 2 here
        </div>
    </div>
</div>

我添加id到您的容器,并添加data-parent到您的内容部分,通过该引用此容器id.