单击菜单链接后如何隐藏 Bootstrap 下拉菜单？

Question

在我的单页网站中，我有一个带有汉堡菜单的置顶导航栏。 如果您单击汉堡，将出现一个下拉菜单，其中包含所有链接。

我想在单击菜单链接后隐藏下拉菜单（因此它只会显示带有汉堡的导航栏）。

另外，大屏幕上没有 dorpdown 菜单。

这是代码：

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
      <div class="container-xxl py-2">
        <a class="navbar-brand" href="#">CreatiVE Lab</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink1">Cos'è CreatiVE Lab?</a>
            </li>
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink2">Servizi</a>
            </li>
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink3">Dicono di noi</a>
            </li>
            <li class="nav-item px-lg-3 d-none d-lg-block">
              <a class="nav-link" href="#menuLink4">FAQ</a>
            </li>
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink5">Contatti</a>
            </li>
            <li class="nav-item ps-lg-3">
              <a class="btn btn-primary bigButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">Inizia il tuo progetto</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

我想知道是否有使用 Bootstrap 类的解决方案，或者我是否必须使用 Javascript。

Answer 1

通过代码将 jQuery 连接到您的文件

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

并在此点击处理程序下方插入：

jQuery($ => {
  const $navbar = $('#navbarNav');

  $navbar.find('.nav-link').on('click', () => {
    setTimeout(() => {
      $navbar.collapse('hide');
    }, 500);
  });
});

这里：

• jQuery($ => { ... }) — 等待文档完全加载
• const $navbar = $('#navbarNav') — 将您的 #navbarNav 元素存储到变量中
• $navbar.find('.nav-link') — 在 #navbarNav 上搜索链接
• .on('click', () => { ... }) — 为找到的链接添加点击监听器
• setTimeout(() => { ... }, 500) — 等待滚动动画结束
• $navbar.collapse('hide') — 崩溃 #navbarNav

How it works 在 codepen 上。