引导程序 4 |展开时折叠其他部分答案

【问题标题】：Bootstrap 4 | Collapse other sections when one is expanded引导程序 4 |展开时折叠其他部分
【发布时间】：2018-09-13 16:11:11
【问题描述】：

我正在开发 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>

现场演示：Live Demo

【问题讨论】：

标签： jquery html twitter-bootstrap bootstrap-4 collapse

【解决方案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 1 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 引用此容器。

【讨论】：

还有其他方法吗。我尝试使用 id，但我不能在一页中使用多个 id。
您可以在data-parent 属性中使用任何选择器，例如带有.myGroup 的类。为什么你不能在一个页面中使用多个 id？

【解决方案2】：

只要把 data-parent="#element_parent",

例子...

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

<div class="collapse" id="colla1" data-parent="#element_parent">
    <nav
        your content 1 here
    </nav>
</div>

<div class="collapse" id="colla2" data-parent="#element_parent">
    <nav
        your content 2 here
    </nav>
</div>

【讨论】：

接受的答案已经说过了。您的回答对问题没有帮助。