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

Posted 2023-05-08

【中文标题】展开菜单以展开/折叠所有菜单，无论它们是展开还是关闭

【英文标题】：expand menu to expand/collapse all menues regardless if they are expanded or closed

【发布时间】：2020-12-07 05:31:48

【问题描述】：

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

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

想成为：而我希望我的Collapse all 按钮在所有菜单关闭时展开所有菜单，并且在展开时不要更改它们。然后如果再次单击将关闭所有展开的菜单并且不更改关闭的菜单。 这是我为 As it is 写的一个小提琴：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>

我该怎么做？

【参考方案1】：

我现在能想到的一个天真的解决方案是通过自定义处理程序绑定折叠所有单击事件，该处理程序根据全部折叠按钮上的状态显示或隐藏所有可折叠项，而不是通过 Bootstrap 内置 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" />
...

然后在这个 Collapse all 的按钮点击事件中，你可以在这个按钮本身上有一个状态（通过data-）来记住是显示还是隐藏所有可折叠的。根据该状态变量，您可以手动在所有可折叠组件上调用 .collapse('show') 或 .collapse('hide')。

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

$(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;
    );
);

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

我能想到的另一个更好的“解决方案”是声明一个额外的数据属性，可能类似于 data-toggle-all-at-the-same-time="true"，并覆盖 Bootstrap 的内置 .collapse()，这样当它看到数据属性为真时，它不会切换已经切换的目标元素？

遗憾的是，我还没有找到一个简单的方法来做到这一点。

【参考方案2】：

我会使用 jQuery 中的 toggle 函数。这是其文档的链接https://api.jquery.com/toggle/

这个函数隐藏一个元素，如果它被显示；或者如果它被隐藏则显示它。简单，无需太多检查即可发挥魅力。

【参考方案3】：

您需要在 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>

【讨论】：

他们将它包含在 Fiddle 中。