Как закрыть меню bootstrap при нажатии на ссылку?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Лого</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Ссылка 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Ссылка 2</a>
      </li>
    </ul>
  </div>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

document.addEventListener("DOMContentLoaded", function() {
  var links = document.querySelectorAll(".nav-link");
  var navbarCollapse = document.getElementById("myNavbar");

  links.forEach(function(link) {
    link.addEventListener("click", function() {
      navbarCollapse.classList.remove("show");
    });
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Лого</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Ссылка 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Ссылка 2</a>
      </li>
    </ul>
  </div>
</nav>

1
2
3
4
5

$(document).ready(function() {
  $(".nav-link").click(function() {
    $("#myNavbar").removeClass("show");
  });
});