如何自动打开 "collapse" 菜单？

Question

我有一个主题为 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");
  });

Answer 1

我不知道我是否理解正确，但在 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

Answer 2

jQueryon函数是用来处理一个事件的，.collapse是一个CSS选择器，不是and事件。正确的事件是 show.bs.modal as explained here。其次，正确的 CSS 选择器是 "#collapseMenuManage"...

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

Demo

如何自动打开 "collapse" 菜单？

How to open a "collapse" menu automatically?

javascript

accordion

collapse

twitter-bootstrap

bootstrap-4