Bootstrap4 - メニュークリック時に開いたままのメニューを閉じたい

Bootstrap4を使ってグローバルナビケーションを作る場合は、 navbarクラスを使うと便利ですよね。

ただし便利な反面、カスタマイズしないと不便な所もあります。その一つが「メニュー項目をクリックしてもメニューが閉じない」というデフォルト仕様です。

違うページに遷移するなら、メニューを閉じなくても別にいいかもしれません。

ですがLP（ランディングページ）とかで同一ページ内に飛ぶ場合は、いちいちハンバーガーアイコンをクリックして閉じるのが面倒ですよね。

この問題を解消するプログラムを2パターン紹介します。

メニュー内に「ドロップダウンメニューがない」場合、この場合はシンプル
メニュー内に「ドロップダウンメニューがある」場合、この場合は少し工夫が必要

いずれのプログラムもjQeuryを読み込んだ後に記述してください。

メニューを閉じる方法１: ドロップダウンなしVer

メニュー項目の中にドロップダウンメニュー（.dropdown）がない場合は、次のプログラムを記述します。


<script>
$(document).ready(function () {

  $('.navbar-nav li a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
  });
  
});
</script>

メニューを閉じる方法２: ドロップダウンありVer

ドロップダウンメニューがある場合は、次のプログラムを記述します。


<script>
$(document).ready(function () {

  // .dropdown-menu>a は閉じる
  $('.dropdown-menu>a').on('click', function () {
    $('.navbar-collapse').collapse('hide');
  });

  // .dropdown がない場合だけ閉じる
  $('.navbar-nav>li').on('click', function () {
    if (!$(this).hasClass('dropdown')) {
      $('.navbar-collapse').collapse('hide');
    }
  });

});
</script>

上のプログラムは大きく２つのブロックに分かれています。

★ １つ目のブロック
「.dropdown-menu」直下の a 要素の場合はメニューを閉じます。

★ ２つ目のブロック
「.navbar-nav」直下の li 要素の場合は、 li 要素に「.dropdown」クラスがない場合のみメニューを閉じ、「.dropdown」クラスがある場合はスルーします。