Navbarクリック時にメニューを閉じる方法:Bootstrap 4

Bootstrap4のNavbar(ナビゲーションメニュー)は、デフォルトのままですと、クリック時にメニューが閉じません。
シングルページなどの場合で、１つのページ内でリンクする場合は、Navbarクリック時にメニューを閉じたいですよね。

今回の記事では、Dropdownメニュー以外のリンクがクリックされた時に、メニューが閉じるようにします。

完成版のサンプル

メニューを閉じる

下記のJavaScriptをjQuery読み込みの後ろに追記します。

<script>
$('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
    if(this.id != 'navbarDropdown'){
      $('.navbar-collapse').collapse('hide');
    }
});</script>

2行目：「.navbar-nav>li>a , .dropdown-menu>a」は、Navbarのリンクと、ドロップダウンのリンクのクリックイベントを取得しています。

3行目：「if(this.id != 'navbarDropdown'){」は、ドロップダウンメニューの開閉時にメニューが閉じないようにしています。

4行目：「$('.navbar-collapse').collapse('hide');」で、メニューを閉じています。

アイコン変更

ハンバーガーメニューがクリックされた時に、アイコンを変更します。

button[aria-expanded="true"] > span {
  position: relative;
  display: none;
}

button[aria-expanded="true"]::after {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  content: "X";
}

Button属性の、aria-expanded が、trueの場合はメニューが閉じているとき、falseが開いているときです。
今回は単純にメニューが開いたときに「content: "X"」で、「X」に切り替えています。

Navbarがデフォルトで閉じないのは少し不思議な気もしますが、JavaScriptを少し追加することで実装可能です。