めっちゃ悩んだので、急ぎ備忘録。
html内、メニュー部分
<nav class=”navbar navbar-expand-lg navbar-light bg-light fixed-top”>
<div class=”container”>
<a class=”navbar-brand ” href=”/”><img src=”img/logo.png” alt=”” class=”img-fluid”></a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNavDropdown” aria-controls=”navbarNavDropdown” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse justify-content-end” id=”navbarNavDropdown”>
<!– justify-content-start/左揃え justify-content-center/中央揃え justify-content-end/右揃え –>
<ul class=”navbar-nav”>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”/” id=”dropdown01″ data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>サービス</a>
<div class=”dropdown-menu nav-inner” aria-labelledby=”dropdown01″><!– .nav-innerは後述スクリプトを発動させるためのクラス –>
<a class=”dropdown-item” href=”#web”>WEB</a>
<a class=”dropdown-item” href=”#solution”>ソリューション</a>
</div>
</li>
<li class=”nav-item active nav-inner“>
<a class=”nav-link” href=”#profile”>会社概要</a>
</li>
</ul>
</div>
</div>
</nav>
html内、script表記
他のページで紹介されている
$(“.navbar-nav li a”).click(function(event)~
の書き方だとドロップダウン部分まで閉じてしまうので、対象箇所に別のクラス（.nav-inner)を付与。
そして、ドロップダウンが閉じなくなるため、「.dropdown-menu」のクラスにも「hide」が適用されるように追加。
<script>
$(document).ready(function () {
$(“.nav-inner a”).click(function(event) {
$(“.navbar-collapse,.dropdown-menu“).collapse(‘hide’);
});
});
</script>
コメント