展开菜单以展开/折叠所有菜单，无论它们是展开还是关闭

如何解决展开菜单以展开/折叠所有菜单，无论它们是展开还是关闭

我有4个可扩展菜单和5个按钮。 Collapse first按钮可扩展/关闭第一个菜单，Collapse second按钮可扩展/关闭第二个菜单，依此类推。

现状：每个菜单的按钮Collapse all在展开时将其关闭，在关闭时将其展开。

想要：我想让Collapse all按钮在所有菜单都关闭的情况下将其展开，而在它们展开时不进行更改。然后，如果再次单击，将关闭所有展开的菜单，并且不要更改已关闭的菜单。这是我为原样写的一个小提琴：expand menu fidlle

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1,#collapseExample2,#collapseExample3,#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
    Collapse all
  </button>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
    Collapse first
  </button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
    Collapse second
  </button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
    Collapse third
  </button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
    Collapse fourth
  </button>
</p>
<div class="collapse" id="collapseExample1">
  <div class="card card-body">
    hi first
  </div>
</div>
<div class="collapse" id="collapseExample2">
  <div class="card card-body">
    hi second
  </div>
</div>
<div class="collapse" id="collapseExample3">
  <div class="card card-body">
    hi third
  </div>
</div>
<div class="collapse" id="collapseExample4">
  <div class="card card-body">
    hi fourth
  </div>
</div>

我该怎么办？

解决方法

我现在想到的一个天真的解决方案是通过一个自定义处理程序来绑定“全部折叠”点击事件，该处理程序根据“全部折叠”按钮上的状态来显示或隐藏所有可折叠项，而不是通过内置的Bootstrap {{1} }和data-toggle="collapse"。

data-target="*"

然后在“折叠所有人”的按钮单击事件中，您可以在此按钮本身上具有状态（通过<p> <button id="toggle-all" class="btn btn-primary" type="button"> Collapse all </button> <button class="btn btn-primary" type="button" data-toggle="collapse" ... /> ... </p> <div class="collapse" /> ...）来记住是显示还是隐藏所有可折叠对象。根据该状态变量，您可以手动调用所有可折叠对象上的data-或.collapse('show')。

如果show方法已经显示，则它不会再次显示它。如果隐藏了可折叠的对象，则hide方法不会将其隐藏。

.collapse('hide')

演示： https://jsfiddle.net/davidliang2008/cvy2kbpz/28/

我可以想到的另一个更好的“解决方案”是声明一个额外的数据属性，例如类似$(function() { $('#toggle-all').click(function() { // Declare a variable,`data-to-show`,to contain the state whether to show/hide // all collapsibles. // It defaults to true,which means it's about to show all. if (!$(this).data('to-show')) { $(this).data('to-show',true); } else { $(this).data('to-show',!$(this).data('to-show')); } if ($(this).data('to-show')) { $('.collapse').collapse('show'); } else { $('.collapse').collapse('hide'); } return false; }); });，并覆盖Bootstrap内置的data-toggle-all-at-the-same-time="true"，以便在看到该数据属性为true时，它不会切换已切换的目标元素？

遗憾的是，我还没有找到一种简单的方法。

我将使用jQuery的toggle函数。这是指向其文档https://api.jquery.com/toggle/

的链接

如果该元素显示为良性，则此函数将其隐藏；或显示它是否隐藏。简单，就像魅力一样，无需太多检查。

您需要在html页面上包含jQuery。就在底部。让此脚本成为body标签中的最后一个元素。
然后，您将需要包含boostrap文件夹中的所有javascript文件（如果您已经下载了该文件夹）。

在脚本上添加以下标记。如前所述，在代码之前

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>