Bootstrap4 手风琴 - 不使用 JavaScript 全部折叠

如何解决Bootstrap4 手风琴 - 不使用 JavaScript 全部折叠

以下是 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,craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

我正在尝试在我的 Bootstrap 手风琴中实现类似的折叠/展开所有功能。我发现这个实现并不像我想要的那样工作。这只是将面板的状态更改为与当前相反的状态。

例如：

面板 1：隐藏

面板 2：隐藏

面板 3：隐藏

变成

面板 1：可见

Panel2：可见

面板 3：可见

这很好，但例如州是这样的：

面板 1：隐藏

Panel2：可见

面板 3：隐藏

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

面板 1：可见

面板 2：隐藏

面板 3：可见

有没有办法使用 Bootstrap4 来打开或关闭所有面板？

E：

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

当面板折叠时，它的类是“multi-collapse collapse”，当它可见时，它的类是“multi-collapse collapse show”。如果我可以为数据目标指定多个类，我可以根据条件使目标多折叠折叠或多折叠折叠显示......有什么办法可以为数据目标指定多个类？

即使有一种方法可以折叠手风琴中的每个面板，也可以做到这一点。

E2：

感谢 Zim，让它完全按照我的意愿行事

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

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

解决方法

不使用 JavaScript 的唯一方法是使用 2 个单独的按钮。 data-target 将仅针对打开的 .multi-collapse.show 或关闭的 .multi-collapse:not(.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>

Demo

为了使用单个按钮执行此操作，您需要 JS 来跟踪折叠面板的状态。