bootstrapのnavbarでハンバーガーメニューを押してもリストが出てこない。

前提・実現したいこと

bootstrapでナビゲーションバーを作成しましたが、
ハンバーガーメニューを押してもリストが出てきません。
表示はされている状態です。
リストを表示するにあたり何か不足していることや不要なコードなどがあれば
ご教授ください。

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    
    <title>Hello, world!</title>
    
  </head>
  
  <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="＃">
              <img src="../images/icon.jpg"></a>
           
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                    <div class="collapse navbar-collapse justify-content-end">
              <ul class="navbar-nav">
  
                  
                 <li class="nav-item">
                  <a class="nav-link"href="file:///Users/name/Desktop/yuu.site/kiyaku/index.html">Terms of service</a><span class="sr-only">(current)</span></a>
                 </li>
                 <li class="nav-item">
                  <a class="nav-link" href="#">privacy policy</a>
                 </li>
                 <li class="nav-item">
                  <a class="nav-link" href="https://docs.google.com/forms/d/e/1FAIpQLSePaNUaana
                  LNvZWeicqADzrgrPXYcdLrJ9P4Onuwyjrx1aiew/viewform?usp=sf_link">contact us</a>
                 </li>
              </ul>
            </div>
            </div>
        </nav>
        
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

試したこと

</body>タブ直前に以下のスクリプトを記述。 ```ここに言語を入力  <script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

bootstrapの読み込み部分の確認。
1
2
3### 補足情報（FW/ツールのバージョンなど）
4
5
6エラーは確認出来ませんでした。

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

回答1件

ベストアンサー

<a class="navbar-brand" href="＃"> の「＃」が全角です。

html
1<div class="collapse navbar-collapse" id="navbarNav">
2　　<div class="collapse navbar-collapse justify-content-end">

上記のコードは一行でいいと思います。（</div> は一つ削除）

html
1<div class="collapse navbar-collapse justify-content-end" id="navbarNav">

もう一つ。

html
1<a class="nav-link"href="file:///Users/name/Desktop/yuu.site/kiyaku/index.html">Terms of service</a><span class="sr-only">(current)</span></a>

下記のように訂正

html
1<a class="nav-link"href="/kiyaku/index.html">Terms of service</a><span class="sr-only">(current)</span></a>

これでどうでしょうか？

投稿2019/07/28 05:54

退会済みユーザー

総合スコア0

yucom

2019/07/28 07:12

表示できました！ありがとうございます！全角とはお恥ずかしい限りです。。全く気づきませんでした。分かりやすくコードも記述して頂きありがとうございました。助かりました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！