Bootstrap4でリンククリック時にメニューを閉じる処理

Question

Bootstrap4 を使ってサイトを作っているのですが
同一HTML内でのアンカーリンクの際、ハンバーガーメニューの中のリンクをクリックした際、１度目は正常に動作し閉じてくれるのですが、二回目以降アンカーの位置に移動はしてくれますが、メニューは閉じてくれず開いたままの状態。
ハンバーガーメニューのボタンを押せば閉じてはくれます。
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">メニュー１</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">メニュー２</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">メニュー３</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#contents04">メニュー４</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">メニュー５</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">メニュー６</a> </li>
      </ul>
     </div>
  </div>
</nav>

Comments

[kei344]

「java」ではなく「JavaScript」では？また、質問タイトルは質問内容がわかるように編集することをお勧めします。

[退会済みユーザー]

ありがとうございます。修正させていただきました。

[x_x]

「一度は自動で閉じている」とありますが、本来なら一度も閉じないはずなので何か別のスクリプトが動いているのでは？

[退会済みユーザー]

ありがとうございます。他の要素を見直したところ画像のスライダーを入れていたのですがそちらが影響していたようで動作するようになりました。

Answer 1

他の要素を見直したところ画像のスライダーを入れていたのですがそちらが影響していたようで、スライダーを外すと動作するようになりました。

Answer 2

他の要素を見直したところ画像のスライダーを入れていたのですがそちらが影響していたようで動作するようになりました。