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

我不知道我是否理解正确，但在引导程序 4 中，您可以使用 body { padding: 0; } .main { border: 1px solid black; width: 100vw; height: 100vh; } .block { position: absolute; left: 50px; padding: 30px; background-color: aqua; } .moving-element { width: 60px; height: 60px; border: 1px solid white; background-color: purple; font-size: 10px; color: white; } 自动显示内容。

示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="main">
  <div class="block">
    <button type="button" class="moving-element">Catch me</button>
  </div>
</div>

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

Answer 2

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

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

2 个答案: