bootstrap navbar の画面を小さくした時のアイコンが機能しない

Question

現在ナビゲーションバーで、画面が小さい時（スマホなど）に三本線のアイコンが表示される機能を作成しています。表示はできたのですが、押しても何も反応しない状態です。
](174be869ab0104fc8696a63b64bf4bd4.png)

該当コード

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <%= link_to "ねこじた", tops_index_path, class: "navbar-brand" %>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav">
          <% if user_signed_in? %>
          <li class="nav-item">
            <%= link_to "サインアウト", destroy_user_session_path, method: :delete %>
          </li>
          <li class="nav-item">
            <%= link_to "ユーザー", user_path(current_user), class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "投稿", new_post_path, class: "btn btn-primary" %>
          </li>
          <% else %>
          <li class="nav-item">
            <%= link_to "ログイン", new_user_session_path, class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "会員登録", new_user_registration_path, class: "nav-link" %>
          </li>
          <% end %>
      </ul>
    </div>
  </nav>

bootstrapの適用はできているので、

Comments

[x_x]

文章が途中で途切れてしまっているので確認してみてください。
HTML を全部載せることはできるでしょうか？

[kousuke24]

Railsで作成しており、ナビゲーションバーをパーシャルで作成しています。そのためHTMLの基準はこれで全てになります。

[x_x]

では、タグを追加してください。文章も最後まで書いてください。

[kousuke24]

申し訳ありませんm(_ _)m
説明不足でした。

Answer 1

apprication.html.erbでjquery等を読み込んでいませんでした。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

これを忘れずに