Bootstrap<で.navbar-collapse内のメニューリンクをクリック（タップ）して同一ページのアンカーポイントへ移動すると同時に、.collapseメニューを閉じる処理についてメモ。
.navbar-nav 内のリンククリック時に.collapse メニューを閉じる
Bootstrapからソースコードを拝借しますが、以下のようなヘッダーメニューがあるとして、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li><a href="#contents1">コンテンツ1</a></li> <li><a href="#contents2">コンテンツ2</a></li> <li><a href="#contents3">コンテンツ3</a></li> <li><a href="#contents4">コンテンツ4</a></li> <li><a href="#contents5">コンテンツ5</a></li> </ul> </nav> |
コンテンツ1〜コンテンツ5のリンクが、全て同じページのアンカーポイントに移動（#contents1〜#contents5）するようになっている時、
このままだと、コンテンツ1〜コンテンツ5のリンクをクリック（タップ）しても.collapseメニューが開いたままですが、
以下のように.navbar-collapseにhideクラスを与えてあげることで.collapseメニューを閉じることができるようになります。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $(".navbar-nav li a").click(function(event) { $(".navbar-collapse").collapse('hide'); }); }); </script> |
コメント
以前からお世話になっていましたが、本当に素晴らしい対応をしてくれます。
一度試しにお世話になってみてください。