Bootstrap 4 navbar - свернуть по ссылке nav-link в ванили JS

Question

Я пытаюсь заставить Bootstrap 4 navbar использовать только ваниль 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

Возможное решение для вашего вопроса - найти все .nav-link s и добавить прослушиватель кликов, чтобы удалить класс show из списка классов.

Также вы можете немного упростить свой код используя 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>

Answer 2

Поскольку вы используете пользовательский код, нет необходимости иметь цель (data-target="#navbarResponsive") на html. Таким образом, мы можем переписать обработчик click для обработки обоих элементов, переключателя и ссылок. Для переключения класса просто используйте метод toggle on classList.

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>