Bootstrap4 を使ってサイトを作っているのですが
同一HTML内でのアンカーリンクの際、ハンバーガーメニューの中のリンクをクリックした際、1度目は正常に動作し閉じてくれるのですが、二回目以降アンカーの位置に移動はしてくれますが、メニューは閉じてくれず開いたままの状態。
ハンバーガーメニューのボタンを押せば閉じてはくれます。
Bootstrap3ではJavaScriptの処理を追加してやると対応出来てたのですがBootstrap4では同様のJavaScriptでは対応出来なくて困っています。
以前参考にしたのは
https://www.webantena.net/bootstrap/collapse-menu-close-on-click/
<script> $(document).ready(function () { $(".navbar-nav li a").click(function(event) { $(".navbar-collapse").collapse('hide'); }); }); </script>このような処理を追記。
現在は上記javaScriptを記載せずに一度は自動で閉じている状態です。
現状のソースは
<nav class="navbar navbar-expand-md fixed-top "> <div class="container"><a class="navbar-brand" href="#"><img src="../img/logo.svg"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替" style=""><i class="fas fa-bars fa-fw"></i> </button> <div class="collapse navbar-collapse" id="Navbar"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle dropdown-toggle--extend" href="#contents01" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">メニュー1</a> <div class="dropdown-menu dropdown-menu--extend" aria-labelledby="dropdown"> <a class="dropdown-item dropdown-item--extend" href="">サブメニュー</a> <a class="dropdown-item dropdown-item--extend" href="">サブメニュー</a> <a class="dropdown-item dropdown-item--extend" href="">サブメニュー</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle dropdown-toggle--extend" href="#contents02" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">メニュー2</a> <div class="dropdown-menu dropdown-menu--extend" aria-labelledby="dropdown"> <a class="dropdown-item dropdown-item--extend" href="">サブメニュー</a> <a class="dropdown-item dropdown-item--extend" href="">サブメニュー</a> <a class="dropdown-item dropdown-item--extend" href="">サブメニュー</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#contents03">メニュー3</a> </li> <li class="nav-item"> <a class="nav-link" href="#contents04">メニュー4</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle dropdown-toggle--extend" href="" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">メニュー5</a> <div class="dropdown-menu dropdown-menu--extend" aria-labelledby="dropdown"> <a class="dropdown-item dropdown-item--extend" href="" target="_blank">サブメニュー</a> <a class="dropdown-item dropdown-item--extend" href="" target="_blank">サブメニュー</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#contents06">メニュー6</a> </li> </ul> </div> </div> </nav>
回答2件
あなたの回答
tips
プレビュー