やりたい事
Rails6にてアプリケーションを作成しております。
ヘッダーのアカウント部分にbootstrapのdropdownmenuを追加したく、コードを記述したのですが、
ブラウザ上でdropdownをクリックしても何の反応もありません。
html
1<header class="navbar navbar-fixed-top navbar-inverse"> 2 <div class="container"> 3 <%= link_to "GYMOHA APP", root_path, id: "logo" %> 4 <nav> 5 <ul class="nav navbar-nav navbar-right"> 6 <li><%= link_to "ホーム", root_path %></li> 7 <li><%= link_to "GYMOHAとは?", about_path %></li> 8 <li><%= link_to "ログイン", login_path %></li> 9 <% if logged_in? %> 10 <li><%= link_to "ユーザー", '#' %></li> 11 <li class="dropdown"> 12 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 13 アカウント <b class="caret"></b> 14 </a> 15 <ul class="dropdown-menu"> 16 <li><%= link_to "プロフィール", current_user %></li> 17 <li><%= link_to "設定", '#' %></li> 18 <li class="divider"></li> 19 <li> 20 <%= link_to "ログアウト", logout_path, method: :delete %> 21 </li> 22 </ul> 23 </li> 24 <% end %> 25 </ul> 26 </nav> 27 </div> 28</header>
試したこと
https://teratail.com/questions/227973
こちらのご質問を参考に、application.htmlにコードを追加したところ機能しました。
html
1<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 2<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 3<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 4<!DOCTYPE html> 5<html> 6 <%= render 'layouts/head' %> 7 <body> 8 <%= render 'layouts/header' %> 9 <div class="container"> 10 <% flash.each do |message_type, message| %> 11 <div class="alert alert-<%= message_type %>"><%= message %></div> 12 <% end %> 13 <%= yield %> 14 <%= render 'layouts/footer' %> 15 </div> 16 </body> 17</html>
知りたいこと
なぜヘッダーのHTMLを編集しても機能されなかったのか。
また、なぜapplication.htmlに上記コードを記述したことで機能されたのか。
その理由を知りたいです。
よろしくお願い申し上げます。
あなたの回答
tips
プレビュー