Bootstrap4のナビゲーションメニューは、デフォルトではクリック時にメニューが閉じません。
これって、シングルページなどの場合で、１つのページ内でリンクする場合は大変不便。
自動で閉じるように改良したいな、と思ったら方法を発見。
忘れないようにメモメモ。
方法は簡単。
Jqueryの読み込みの後に、下記のスクリプトを入れるだけ。
$(‘.navbar-nav>li>a , .dropdown-menu>a’).on(‘click’, function(){
if(this.id != ‘navbarDropdown’){
$(‘.navbar-collapse’).collapse(‘hide’);
}
});
collapse(“hide”)がポイントです。
これでメニューのリンククリック時に、自動でメニューが閉じてくれます。
と、解決したと思ったら別の問題が！
クリックしたらメニューを閉じるという命令は、つまりサブメニューをクリックして開くことができないという別問題が出てしまった。
仕方なく、スマホ画面でのサブメニューは開きっぱなしな状態にした。
ulのclass名を書き換えるだけ
ul class=”dropdown-menu”
↓
ul class=”list-group”
に変更するだけです。