Bootstrapのナビゲーションバーを使ったページ内リンクにおける、ドロップダウンしたリストが消えない問題

Bootstrap4, jQuery

Bootstrapの提供しているナビゲーションバーを使用して、1ページで完結するランディングページのようなものをつくりました。スマホで見るとドロップダウンメニューに自動的に変換してくれていてとても簡単に導入できますね。
ですがページ遷移がなく1ページで完結するシングルページだと、ドロップダウンしたメニューをタップしてもページ内遷移はできますが、だらんと下がってきたドロップダウンメニューが隠れてくれないんですね。

公式サイトで提供している実例ページを見てみても挙動は変わらないので、このナビゲーションバーはページ内リンクを考慮していないようです。

See the Pen
daEoJp
by nagomixxxx (@nagomixxxx)
on CodePen.

上のコードは単純にBootstrapの公式サイトからHTMLをコピーしたものです。

ナビゲーションバーを開いてメニューリンクをピコピコクリックしてみても、ページ内遷移はできているようだけどナビゲーションは開きっぱなしで、右上にあるアイコンを再度クリックしない限りドロップダウンメニューは閉じてくれません。
ここはコチラ側でjQueryを使って挙動を追加する必要がありそう。

jQueryで挙動を追加する

See the Pen
nabver-02
by nagomixxxx (@nagomixxxx)
on CodePen.

jQueryを追加しました。
これは「.navbar-nav .nav-item > a がクリックされた時、.navbar-togglerをクリックしてしてね!よろしく!」という命令です。めちゃ単純。
これでシングルページでページ内遷移を行った場合もメニューがシュッと隠れてくれるようになりました。やったね!

ブレークポイントで表示を切り替えている場合は条件文を使う

ちなみに、上記のコードは「常時折り畳まれているナビゲーションバー」を使用した場合の命令文になります。Bootstrapでは特定のクラスを利用して、ブレークポイントによってナビゲーションの表示を切り替えることも可能です。
詳しくはリンク先の「レスポンシブ動作(Responsive behaviors)」の箇所を確認してみてください。

ナビゲーションバー~Bootstrap4移行ガイド

画面サイズによってドロップダウン表示にする・しないを切り替えている場合、指定の画面サイズ以下の場合のみ、上記の命令が発動するようにしなければなりません。
下のコードは、.navbar-expand-lgを追加して「画面サイズ992px以上の場合はメニューが横並びになるナビゲーションバー」に変更しました。Codepenのロゴをクリックして別ウィンドウで確認してみてください。

See the Pen
nabver-03
by nagomixxxx (@nagomixxxx)
on CodePen.

こちらのように、ブレークポイントに合わせたif文を使うようにします。
もちろん、ブレークポイントを変更した場合はこのif文のウィンドウサイズも変更する必要があります。注意しなきゃですね。