Bootstrap4 Accordion-在不使用JavaScript的情况下全部折叠

Question

以下是Bootstrap4文档中的代码片段，位于：https://getbootstrap.com/docs/4.0/components/collapse/

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

我正在尝试在我的引导手风琴中实现类似的折叠/扩展所有功能。我发现这个实现并没有按我的预期工作。这只是将面板的状态更改为与当前相反的状态。

例如：

面板1：隐藏

面板2：隐藏

面板3：隐藏

变成

面板1：可见

面板2：可见

面板3：可见

这很好，但举个例子来说，各州是这样的：

面板1：隐藏

面板2：可见

面板3：隐藏

我希望崩溃/展开全部使它们全部隐藏或全部可见，但它实际上变成了：

面板1：可见

面板2：隐藏

面板3：可见

有没有一种使用Bootstrap4的方法可以打开或关闭所有面板？

E:

因此，如果要折叠的所有面板都具有class=“multi-collapse”，我可以使用切换按钮中的data target=“.multi-collapse”来折叠它们。

当面板折叠时，其类为“multi-collapse collapse”，当其可见时，其类为“multi-collapse collapse show”。如果我可以为数据目标指定多个类，我可以根据条件使目标显示为多折叠折叠或多折叠折叠…有没有任何方法可以为数据目标指定多个类？

即使有一种方法可以折叠手风琴中的每个面板，也能达到效果。

E2：

多亏了齐姆我才得到了我想要的

<input type="button" class="btn btn-primary" data-toggle="collapse" [attr.data-target]="allExpanded ? '.multi-collapse:not(.show)': '.multi-collapse.show'" (click)="allExpanded = !allExpanded" [attr.value]="allExpanded ? 'Collapse All': 'Expand All'" >  

这是一个角度项目，因此我能够使用组件文件中的布尔变量跟踪单个按钮的状态。

Answer 1

不使用JavaScript的唯一方法是有两个单独的按钮。data-Target将只针对打开的。multi-collapse.show，或关闭的. multi-崩溃：不是（. show）面板...

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse:not(.show)">Show all</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse.show">Hide all</button>

演示

为了用一个按钮实现这一点，您需要JS来跟踪折叠面板的状态。