Bootstrap4 navbarのハンバーガーアイコンを閉じる事ができない

前提・実現したいこと

Bootstrap4を利用してWEBシステムを開発しています。

Bootstrap4のnavbarを利用し、スマホで表示した際、ハンバーガーアイコンをクリックすると開くのですが、再度アイコンを押しても閉じる事ができません。
リロードすると閉じる事ができますが、設計上良くないため、アイコンを押すことで閉じる動きにしたいです。

他のサイト等で対策を調べると、このようにnavbarが閉じないのは、デフォルトの設計らしく、解決のためのコードも紹介されていますが、そちらを使いしても、解決出来ない状況です。

解決の方法等ご存じの方おりましたら、ご教授いただけないでしょうか？

該当のソースコード

こちらのサイトを参考にして
Navbarクリック時にメニューを閉じる方法:Bootstrap 4

以下のように、</body>の上に、メニューを閉じるコードを追加してもうまく機能しません。

html
1<!DOCTYPE html>
2
3<script crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
4<script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
5<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
6<script crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
7<script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
8<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
9
10<html lang="ja" style="overflow-x: hidden";>
11
12<head>
13    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
14    <!-- Meta, title, CSS, favicons, etc. -->
15    <meta charset="utf-8">
16    <meta http-equiv="X-UA-Compatible" content="IE=edge">
17    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
18    <link rel="icon" href="/static/images/favicon.ico" type="image/ico"/>
19<title>
20タイトル
21</title>
22    <!-- Bootstrap -->
23    <link href="/static/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
24    <!-- Font Awesome -->
25    <link href="/static/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
26    <!-- NProgress -->
27    <link href="/static/vendors/nprogress/nprogress.css" rel="stylesheet">
28    <!-- iCheck -->
29    <link href="/static/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
30    <!-- bootstrap-progressbar -->
31    <link href="/static/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
32          rel="stylesheet">
33    <!-- JQVMap -->
34    <link href="/static/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
35    <!-- bootstrap-daterangepicker -->
36    <link href="/static/vendors/bootstrap-daterangepicker/daterangepicker.css"
37          rel="stylesheet">   
38</head>
39<body style="overflow-x: hidden; ">
40<header>
41    <nav class="navbar navbar-expand-md navbar-light fixed-top ">
42        <a href="/" >ブランド</a>
43        <button class="navbar-toggler" type="button" data-toggle="collapse"
44                data-target="#navbarCollapse"
45                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
46            <span class="navbar-toggler-icon"></span>
47        </button>
48        <div class="collapse navbar-collapse" id="navbarCollapse">
49            <ul class="navbar-nav mr-auto">
50                <li class="nav-item">
51                    <a class="nav-link" href="/">ホーム <span class="sr-only">(current)</span></a>
52                </li>
53                <li class="nav-item">
54                    <a class="nav-link" href="/">登録する</a>
55                </li>
56                <li class="nav-item">
57                    <a class="nav-link" href="/">ログイン</a>
58                </li>
59            </ul>
60        </div>
61    </nav>
62</header>
63
64<!-- jQuery -->
65<script src="/static/vendors/jquery/dist/jquery.min.js"></script>
66<!-- Bootstrap -->
67<script src="/static/vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
68<!-- FastClick -->
69<script src="/static/vendors/fastclick/lib/fastclick.js"></script>
70<!-- NProgress -->
71<script src="/static/vendors/nprogress/nprogress.js"></script>
72<!-- Chart.js -->
73<script src="/static/vendors/Chart.js/dist/Chart.min.js"></script>
74<!-- gauge.js -->
75<script src="/static/vendors/gauge.js/dist/gauge.min.js"></script>
76<!-- bootstrap-progressbar -->
77<script src="/static/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
78<!-- iCheck -->
79<script src="/static/vendors/iCheck/icheck.min.js"></script>
80<!-- Skycons -->
81<script src="/static/vendors/skycons/skycons.js"></script>
82<!-- Flot -->
83<script src="/static/vendors/Flot/jquery.flot.js"></script>
84<script src="/static/vendors/Flot/jquery.flot.pie.js"></script>
85<script src="/static/vendors/Flot/jquery.flot.time.js"></script>
86<script src="/static/vendors/Flot/jquery.flot.stack.js"></script>
87<script src="/static/vendors/Flot/jquery.flot.resize.js"></script>
88<!-- Flot plugins -->
89<script src="/static/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
90<script src="/static/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
91<script src="/static/vendors/flot.curvedlines/curvedLines.js"></script>
92<!-- DateJS -->
93<script src="/static/vendors/DateJS/build/date.js"></script>
94<!-- JQVMap -->
95<script src="/static/vendors/jqvmap/dist/jquery.vmap.js"></script>
96<script src="/static/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
97<script src="/static/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
98<!-- bootstrap-daterangepicker -->
99<script src="/static/vendors/moment/min/moment.min.js"></script>
100<script src="/static/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
101
102<!-- Custom Theme Scripts -->
103<script src="/static/build/js/custom.min.js"></script>
104
105<script>
106$('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
107    if(this.id != 'navbarDropdown'){
108      $('.navbar-collapse').collapse('hide');
109    }
110});
111</script>
112
113</body>
114
115</html>

今回のnavbarはドロップダウンメニューがないもので、
こちらのサイトの情報を参考にしてもうまく機能しませんでした。
Bootstrap4 - メニュークリック時に開いたままのメニューを閉じたい

補足情報（FW/ツールのバージョンなど）

開発環境

bootstrap4
Python: 3.7.5
Django: 2.2.2

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんが参考にされているサイトに書かれているのは「Navbar がクリックされた時にメニューを閉じる方法」であり、「Navbar 上のアイコンがクリックされたときにメニューを閉じる方法」とは全く異なる問題です。今回の場合には jQuery を自身で書く必要はなく、 Bootstrap のみで実現することが出来ます。

Responsive behaviors - Navbar · Bootstrap

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

今回の問題の原因は、複数回 jQuery を読み込んでいることであるため、重複している script 要素を削除することで解決することが出来ます (動作確認用リンク)。

HTML
1<!DOCTYPE html>
2
3<html lang="ja">
4
5  <head>
6    <script crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
7    <script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
8    <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
9
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12    <!-- Meta, title, CSS, favicons, etc. -->
13    <meta charset="utf-8">
14    <meta http-equiv="X-UA-Compatible" content="IE=edge">
15    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
16    <link rel="icon" href="/static/images/favicon.ico" type="image/ico" />
17    <title>
18      タイトル
19    </title>
20  </head>
21
22  <body style="overflow-x: hidden; ">
23    <header>
24      <nav class="navbar navbar-expand-md navbar-light fixed-top">
25        <a href="/">ブランド</a>
26        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
27          <span class="navbar-toggler-icon"></span>
28        </button>
29        <div class="collapse navbar-collapse" id="navbarCollapse">
30          <ul class="navbar-nav mr-auto">
31            <li class="nav-item">
32              <a class="nav-link" href="/">ホーム <span class="sr-only">(current)</span></a>
33            </li>
34            <li class="nav-item">
35              <a class="nav-link" href="/">登録する</a>
36            </li>
37            <li class="nav-item">
38              <a class="nav-link" href="/">ログイン</a>
39            </li>
40          </ul>
41        </div>
42      </nav>
43    </header>
44  </body>
45
46</html>