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

メニューを閉じたい

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

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

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

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

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

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

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

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

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


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

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

メニューを閉じる方法2: ドロップダウンあり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>

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

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

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