Bootstrapのトグルナビゲーションバーをリンククリック後に閉じる方法

JavaScriptを使用する方法: 以下のJavaScriptコードを使用して、リンクがクリックされたときにトグルナビゲーションバーを閉じます。

<script>
  // ナビゲーションバーのリンクがクリックされたときに実行される関数
  function closeNavbar() {
    // トグルナビゲーションの要素を取得
    var navbarToggler = document.querySelector('.navbar-toggler');
    // ナビゲーションバーが展開されている場合、トグルをクリックして閉じる
    if (navbarToggler.classList.contains('collapsed')) {
      navbarToggler.click();
    }
  }
</script>

この方法では、ナビゲーションバーのリンクにonclick属性を追加し、closeNavbar()関数を呼び出します。

<a href="#" onclick="closeNavbar()">リンク</a>

jQueryを使用する方法: もう一つの方法は、jQueryを使用することです。以下のコード例では、リンクがクリックされたときに、トグルナビゲーションバーを閉じます。

<script>
  $(document).ready(function() {
    // ナビゲーションバーのリンクがクリックされたときに実行される関数
    $('.navbar-nav a').click(function() {
      // トグルナビゲーションを閉じる
      $('.navbar-collapse').collapse('hide');
    });
  });
</script>

この方法では、jQueryライブラリを読み込んでいることを確認し、ナビゲーションバーのリンクを適切なセレクタで指定します。

これらはBootstrapのトグルナビゲーションバーをリンククリック後に閉じるための2つの一般的な方法です。どちらの方法も効果的であり、利用する環境に応じて選択できます。