Bootstrapのナビゲーションバーでリンクをクリックしたとき🍔メニューを閉じる

(タイトルが長いのでハンバーガーを🍔にしました)

Bootstrapのナビゲーションバーでは、同一ページのアンカーリンクの場合、メニューが開いたままです

これバグだろと言いたくなりますが、以下のスクリプトで対処できました

  <script>
    document
      .querySelectorAll(".navbar-nav li a:not(.dropdown-toggle)")
      .forEach((link) => {
        link.addEventListener("click", () => {
          const navbarResponsive = document.getElementById(
            "navbarSupportedContent"
          );
          if (navbarResponsive.classList.contains("show")) {
            const navbarToggler = document.querySelector(".navbar-toggler");
            setTimeout(() => {
              navbarToggler.click();
            }, "1000");
          }
        });
      });
  </script>

Bootstrap 5 menu test
https://codepen.io/paulobrien/pen/dyaaGxm/7c02a83339bc2b89f968b44cad6586cd
via:
Trying to close a hamburger menu when it is clicked on - JavaScript - SitePoint Forums | Web Development & Design Community
https://www.sitepoint.com/community/t/trying-to-close-a-hamburger-menu-when-it-is-clicked-on/433392

(idとかタイムアウトは必要に応じて書き換え)

このブログのナビゲーションバーはとりあえずそのまま
(まぁデモで置いてる感じなのと、余計なスクリプトを追加したくないので)

関連エントリ

• [Bootstrap][Blogger]Fixed navbarのサンプル