Bootstrap 4 导航栏 - 在香草 JS 中单击导航链接时折叠

Question

我试图让 Bootstrap 4 导航栏只使用 vanilla js 而不是任何 jQuery。 到目前为止，我已经能够让切换器触发导航在移动设备上折叠和关闭。 我现在想弄清楚的是如何在单击“导航链接”时使导航栏崩溃

这是用于导航的 HTML：

  <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
  <a class="navbar-brand" href="#">Start Bootstrap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item" >
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Browse Menu</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#visit">Contact</a>
      </li>
    </ul>
  </div>
</div>

和我的 JS 崩溃

(function () {
    "use strict";
    document.querySelectorAll("button.navbar-toggler")[0].addEventListener("click", function (event) {
      var target = this.getAttribute("data-target");
      var subbar = document.querySelectorAll(target)[0];
      subbar.className = (subbar.className + " show").replace(/ show show/, "");
    });
  })();

但是，当用户单击<a class="nav-link" href="#"></a>时，我该如何做到这一点，它也会折叠导航栏？

谢谢！

Answer 1

由于您使用的是自定义代码，因此不必在 html 上设置目标 ( data-target="#navbarResponsive" )。 所以我们可以重写click处理程序来处理两个元素，切换器和链接。 要切换 class 只需使用classList上的方法toggle 。

 document.addEventListener("click", function(event) { if (event.target.classList.contains("navbar-toggler-icon")) { document.getElementById("navbarResponsive").classList.toggle("show"); } else if (event.target.classList.contains("nav-link")) { document.getElementById("navbarResponsive").classList.remove("show"); } });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="#about">About Us</a></li> <li class="nav-item"><a class="nav-link" href="#">Browse Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="#visit">Contact</a> </li> </ul> </div> </div> </nav>

Answer 2

您的问题的一个可能解决方案是找到所有.nav-link并添加一个点击侦听器以从 class 列表中删除show class 。

此外，您可以使用Element.classList.toggle()简化代码，例如：

 (function() { let subbar = document.getElementById("navbarResponsive"); document.querySelectorAll("button.navbar-toggler")[0].addEventListener("click", function(event) { subbar.classList.toggle("show"); }); for (let navItem of document.querySelectorAll("a.nav-link")) { navItem.addEventListener("click", function(event) { subbar.classList.remove("show"); }); } })();

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#about">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Browse Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="#visit">Contact</a> </li> </ul> </div> </div> </nav>