如何自动打开“折叠”菜单？答案

【问题标题】：How to open a "collapse" menu automatically?如何自动打开“折叠”菜单？
【发布时间】：2021-04-10 21:03:40
【问题描述】：

我有一个带有 Bootstrap 4 主题的网站。我希望collapseMenuManage 菜单在出现时自动打开。这是我页面的 HTML 代码：

<div id="modal_aside_first" class="modal fixed-right pl-0 fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-aside" role="document">
    <div class="modal-content">
      <div class="modal-body d-flex flex-column">

        <div class="accordion list-group mb-0" id="accordionMenu">

          <div id="headingMenuMain">
            <a class="list-group-item list-group-item-action border-0 pl-2" data-toggle="collapse" href="#collapseMenuMain" aria-expanded="true" aria-controls="collapseMenuMain">
              <i class="bi bi-plus-circle bi-lg"></i> Menu principal
            </a>
          </div>
          <div id="collapseMenuMain" class="collapse show" aria-labelledby="headingMenuMain" data-parent="#accordionMenu">
            ...
          </div>

          <div id="headingMenuManage">
            <a class="list-group-item list-group-item-action border-0 pl-2" data-toggle="collapse" href="#collapseMenuManage" aria-expanded="false" aria-controls="collapseMenuManage">
              <i class="bi bi-plus-circle bi-lg"></i> Gérer votre compte
            </a>
          </div>
          <div id="collapseMenuManage" class="collapse" aria-labelledby="headingMenuManage" data-parent="#accordionMenu">
            ...
          </div>

        </div>

      </div>
    </div>
  </div>
</div>

我测试了这段 JS 代码，但它不起作用：

  $('#modal_aside_first').on('.collapse', function () { 
    $(this).find("#collapseMenuManage .collapse").collapse("toggle");
  });

【问题讨论】：

为什么会这样？
.collapse 不是事件
@GetSet 我应该在我的 JS 文件中放什么才能让它工作？
添加类可能。我真的不知道。会投票给你，所以这会引起注意。
您有两个 ID 为 headingMenuManage 的 div。您要打开哪个？

标签： javascript twitter-bootstrap bootstrap-4 accordion collapse

【解决方案1】：

jQuery on 函数用于处理事件，.collapse 是 CSS 选择器，而不是事件。正确的事件是show.bs.modal 为explained here。其次，正确的 CSS 选择器是"#collapseMenuManage"...

$('#modal_aside_first').on('show.bs.modal', function () { 
  $(this).find("#collapseMenuManage").collapse("toggle");
})

Demo

【讨论】：

完美，谢谢。我有一个小问题。我在同一 headingMenuMain 和 headingMenuManage arccordion 中有 2 个菜单。 headingMenuMain 菜单默认打开，当headingMenuManage 存在时我想关闭它。目前，两个菜单均已打开。通常在我的手风琴中，一次只能打开一个菜单。

【解决方案2】：

我不知道我是否理解正确，但在 bootstrap 4 中，您可以使用 class="collapse show" 自动显示内容。

例子：

  <div class="card">
<div class="card-header" id="headingOne">
  <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </button>
  </h5>
</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  </div>
</div>

您可以在 bootstrap 4 文档Collapse 中查看更多详细信息

【讨论】：

感谢您的回复，但我需要用 JS 来做这件事。
@mlllmmlml 啊，好吧，对不起！我误会你了... :)