将菜单扩展到 expand/collapse 所有菜单，无论它们是展开还是关闭

Question

我有 4 个可扩展菜单和 5 个按钮。 Collapse first 按钮 expands/closes 第一个菜单，Collapse second 按钮 expands/closes 第二个菜单等等。

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

想要成为：而我希望我的 Collapse all 按钮在所有菜单关闭时展开，并且在展开时不更改它们。然后，如果再次单击，将关闭所有已展开的菜单，并且不会更改已关闭的菜单。这是我为 写的 fiddle 原样 : 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>

我该怎么做？

Answer 1

您需要将 jQuery 添加到您的 html 页面。就在底部。让这个脚本成为你的 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>

Answer 2

我现在能想到的一个天真的解决方案是通过自定义处理程序绑定折叠所有点击事件，该处理程序根据折叠所有按钮的状态显示或隐藏所有可折叠项，而不是通过 Bootstrap built-in 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 方法不会再次显示已显示的可折叠内容。隐藏方法不会隐藏已隐藏的可折叠对象。

$(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 的 built-in .collapse()所以当它看到数据属性为真时，它不会切换已经切换的目标元素？

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

Answer 3

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

这个函数在元素显示时隐藏它；如果它是隐藏的，则显示它。简单易用，无需太多检查。

将菜单扩展到 expand/collapse 所有菜单，无论它们是展开还是关闭

expand menu to expand/collapse all menues regardless if they are expanded or closed

javascript

bootstrap-4

menu

expand

expandable