Bootstrap 5 单击后关闭导航栏

Question

我对 Bootstrap 没有太多经验。 我在互联网上找到了这段代码，但我不明白 html 中的 javascript 是如何工作的。 我希望在导航栏中选择一个项目后关闭汉堡菜单。 当然是手机版

谁能帮我？

git hub address

github page

 <!-- Page Navbar -->
<nav class="custom-navbar" data-spy="affix" data-offset-top="20">
    <div class="container">
        <a class="logo" href="index.html">Portfolio</a>         
        <ul class="nav">
            <li class="item">
                <a class="link" href="#home">Home</a>
            </li>
            <li class="item">
                <a class="link" href="#about">About</a>
            </li>
            <li class="item">
                <a class="link" href="#portfolio">Portfolio</a>
            </li>
            <li class="item">
                <a class="link" href="#testmonial">Testmonial</a>
            </li>
            <li class="item">
                <a class="link" href="#blog">Blog</a>
            </li>
            <li class="item">
                <a class="link" href="#contact">Contact</a>
            </li>
            <li class="item ml-md-3">
                <a href="components.html" class="btn btn-primary">Components</a>
            </li>
        </ul>
        <a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
            <div class="hamburger-box">
              <div class="hamburger-inner"></div>
            </div>
        </a>
    </div>          
</nav><!-- End of Page Navbar -->

Answer 1

我对 Bootstrap 逻辑没有太多经验，但在我看来，我们可以只使用类和 Bootstrap 的属性来实现汉堡菜单，我们最终不需要 Javascript。

查看下面从 Bootstrap Docs 编辑的示例（Navbar > Responsive Behaviors > Offcanvas navbar）。我添加了一些 cmet 来帮助您理解以下代码所创建的内容。 我无法让下面的 sn-p 在 stackoverflow 中工作，但我已经在 CodePen 中对其进行了测试并且它工作正常。

如您所见，打开/关闭菜单背后的逻辑是通过名为“data-bs-toggle”、“data-bs-target”和“data-bs-dismiss”的 html 属性实现的。前两个是打开菜单按钮的属性，最后一个用于关闭菜单按钮上的关闭菜单。

在菜单内的链接中，我们没有看到“data-bs-dismiss”属性，因为它应该打开一个不同的窗口（我认为），但如果你的情况是你留在同一个窗口中，也许你可以添加这个属性在链接中。

我不会尝试更好地解释这一点，因为我也不了解细节......但我想重要的是它有效。

    <!--import Bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Actual example -->
    <nav class="navbar bg-light fixed-top">
      <div class="container-fluid">
        
        <!-- Header Menu -->
        <a class="navbar-brand" href="#">Offcanvas navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Inside the hamburguer menu -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
          
          <!-- Title and close button -->
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          
          <!-- Menu items in an unordered list-->
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
            </ul>
            <form class="d-flex mt-3" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </div>
    </nav>

Answer 2

我设法解决了这个问题。菜单是用jquery打开的，只需要在点击链接时添加一个命令就可以启动jquery中的功能。