ハンバーガーメニューが最初から開きっぱなしになる。

teratailや色んなサイトを見て知らべてみましたが、どうしてもハンバーガーメニューの最初から開きっぱなしが解決しません。初心者なので、わかりやすく詳細に教えて頂ける方どうかよろしくお願い致します。

html
1「head内」
2<head>
3<meta charset="utf-8">
4<meta http-equiv="X-UA-Compatible" content="IE=edge">
5<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
6<title>music</title>
7
8<!-- BootstrapのCSS読み込み -->
9<link href="css/bootstrap.min.css" rel="stylesheet">
10<!-- BootstrapのJS読み込み --> 
11<script src="js/bootstrap.min.js"></script> 	
12<!-- jQuery読み込み --> 
13<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
14	<script>
15	$(function(){
16		$("#nav").click(function(){
17			$("#global_navlist").slideToggle();
18			
19		});
20		});
21	
22	</script>	
23<link href="css/reset.css" rel="stylesheet" type="text/css">
24<link href="css/style.css" rel="stylesheet" type="text/css">
25<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
26
27<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> 
28<script>var __adobewebfontsappname__="dreamweaver"</script> 
29<script src="http://use.edgefonts.net/alfa-slab-one:n4:default;abril-fatface:n4:default.js" type="text/javascript"></script>
30</head>
31

html
1「body内」
2	 <button class="navbar-toggler collapsed" id="nav" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
3  <span class="navbar-toggler-icon"></span>
4</button>
5    <div id="global_nav">
6      <ul id="global_navlist">
7        <li class="menuitem"> <a href="index.html">
8          <p>TOP</p>
9          </a> </li>
10        <li class="menuitem"> <a href="biography.html">
11          <p>BIOGRAPHY</p>
12          </a> </li>
13        <li class="menuitem"> <a href="discography.html">
14          <p>DISCOGRAPHY</p>
15          </a> </li>
16        <li class="menuitem"> <a href="shop.html">
17          <p>GOODS</p>
18          </a>  <li class="menuitem"> <a href="contact.html">
19          <p>CONTACT</p>
20          </a> </li> </li>
21      </ul>
22    </div>

YufanLou

2020/07/03 06:03

Bootstrapタグを追加してください。

退会済みユーザー

2020/07/03 08:32

とても丁寧なご回答ありがとうございます。実はBootstrap初挑戦でのサイト制作をしていますので、プロの方が見たらコードがメチャメチャだろうなとおもいながら作成しています…。下記のコードをそのままコピーしてみましたが、ナビそのものが消えてしまいました。また、Bootstrapタグを追加とありますが、その意味もよくわかりませんでした。勉強不足で大変申し訳ございませんが、わかる範囲で結構ですので、もう一度教えて頂けましたら幸いです。よろしくお願い致します。

nekora

2020/07/12 21:27

質問文作成の時に、jQuery 、webサイトの２つの質問の分類を選択されてますよね。これが質問分類タグで他の人はそれを見ながら、「あ、この分野なら分かる」と回答を書くわけです。 YufanLouさんが、ご指摘なさっているのはjQueryだけでなく「Bootstrap」も使っているから「Bootstrap」に詳しい人向けの質問だよと分かるように質問文にそれも記載してくださいと言う意味です。質問は編集・追記ができますので「Bootstrap」タグを追加してください、そうすれば得意な人が答えてくれます。

Lhankor_Mhy

2020/07/13 07:04

「まだ回答を求めています」とのことですが、すでに回答はついています。私が見る限り、直接的に解決につながる回答でしたので、なぜ「まだ回答を求めています」としたのか、理由がわかりませんでした。おそらく、他の回答者も同様だと思いますので、回答について不明な点を書かない限り、他の回答はつかないのではないでしょうか。

退会済みユーザー

2020/07/17 15:13

nekoraさん！ご回答ありがとうございました。htmlの中で何か記載不足なタグがあったのかな？と勘違いしていました。とても助かりました。

YufanLou

2020/07/18 04:11

コメントを見落としてしまいすみません。nekora さんありがとうございます！コードについては、こちらから対応しやすいため、回答のコメント欄にご協力お願いします。

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

回答1件

問題に直接答えると：<div id="global_nav">にclass="collapse"をついてないのです。

それだけはハンバーガーメニューがうまく動けませんので、詳しく解説します。まずは正しいコードをご覧ください。

html
1「body内」
2<div class="navbar navbar-expand-sm navbar-light bg-light">
3    <button class="navbar-toggler" id="nav" type="button" data-toggle="collapse" data-target="#global_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
4        <span class="navbar-toggler-icon"></span>
5    </button>
6    <div class="collapse navbar-collapse" id="global_nav">
7        <ul class="navbar-nav" id="global_navlist">
8            <li class="nav-item">
9                <a class="nav-link" href="index.html"> TOP </a>
10            <li class="nav-item">
11                <a class="nav-link" href="biography.html"> BIOGRAPHY </a>
12            <li class="nav-item">
13                <a class="nav-link" href="discography.html"> DISCOGRAPHY </a>
14            <li class="nav-item">
15                <a class="nav-link" href="shop.html"> GOODS </a>
16            <li class="nav-item">
17                <a class="nav-link" href="contact.html"> CONTACT </a>
18        </ul>
19    </div>
20</div>

説明の先に、用語を紹介します。ご覧の通り、HTML Element（要素）にはclass（クラス）とidをつけます。

idを使って、唯一の要素を特定できます。#global_navを見ると、id="global_nav"をつけられた要素を指定していると認識してください。

classを使って、要素を分類できます。.nav-linkを見ると、class="nav-link"をつけられた要素を指定していると認識してください。そして、.nav-linkを付けると読むと、class="nav-link"を付けると認識してください。

すでにclassをつけてあれば、例えば、class="collapse"がありながら.nav-linkを付けると読むと、class="collapse nav-link"に書き換えしてください。

複数のclassを付けるとき、例えば.navbar .navbar-light .bg-lightをつけると読むと、class="navbar navbar-light bg-light"をつけると認識してください。

注目すべき変化をまとめてみます：

全てを新たなdivで包んで、そのdivに.navbar .navbar-light .bg-lightを付ける
buttonのdata-targetにハンバーガーメニューのid（つまりglobal_nav)を#で前飾って入れる
#global_navに.collapse .navbar-collapseをつける
liに.menuitemを.nav-itemで書き換える
aに.nav-linkを付ける

他の変化は個人的な意見で、従わなくても大丈夫です：

buttonに.collapedが要らない
aの中のpタグを削除する

追記：head を含める HTML 全体を追記します。

注意すべくのはjQueryの読み込みはBootstrapのJSの読み込みの前にすること。（そうしなかったらブラウザーコンソールでエラーメッセージにそうしなさいと提示されます）

html
1<!DOCTYPE html>
2<html>
3  <head>
4  <meta charset="utf-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
7  <title>music</title>
8
9  <!-- jQuery読み込み --> 
10  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
11  <!-- BootstrapのCSS読み込み -->
12  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
13  <!-- BootstrapのJS読み込み --> 
14  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
15  <!-- FontAwesome --> 
16  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
17
18  <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> 
19  <script>var __adobewebfontsappname__="dreamweaver"</script> 
20  <script src="http://use.edgefonts.net/alfa-slab-one:n4:default;abril-fatface:n4:default.js" type="text/javascript"></script>
21  </head>
22  <body>
23    <div class="navbar navbar-expand-sm navbar-light bg-light">
24        <button 
25          class="navbar-toggler"
26          id="nav"
27          type="button"
28          data-toggle="collapse"
29          data-target="#global_nav"
30          aria-controls="navbarSupportedContent"
31          aria-expanded="false"
32          aria-label="Toggle navigation"
33        >
34            <span class="navbar-toggler-icon"></span>
35        </button>
36        <div class="collapse navbar-collapse" id="global_nav">
37            <ul class="navbar-nav" id="global_navlist">
38                <li class="nav-item">
39                    <a class="nav-link" href="index.html"> TOP </a>
40                <li class="nav-item">
41                    <a class="nav-link" href="biography.html"> BIOGRAPHY </a>
42                <li class="nav-item">
43                    <a class="nav-link" href="discography.html"> DISCOGRAPHY </a>
44                <li class="nav-item">
45                    <a class="nav-link" href="shop.html"> GOODS </a>
46                <li class="nav-item">
47                    <a class="nav-link" href="contact.html"> CONTACT </a>
48            </ul>
49        </div>
50    </div>
51  </body>
52</html>
53