bootstrap4にてナビゲーションバーにドロップダウンメニューを表示しています。
ナビゲーションバーは部分テンプレートで呼び出し、常時画面上部に表示させています。
URI無しのサイトのTOPページから別ページに遷移し、URIが付くとナビゲーションバー内のドロップダウンメニューが開かなくなります。
その後も何度か遷移を繰り返していると、ドロップダウンメニューが開いたり開かなかったりと、動作が安定しません。
ナビゲーションバー
<% if user_signed_in? %> <div class='navbar navbar-default navbar-fixed-top'> <div class='container'> <nav class="navbar navbar-expand fixed-top navbar-light bg-light"> <a href="#" class="navbar-brand">OurGoal</a> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a href="/" class="nav-link">HOME</a></li> <li class="dropdown nav-item"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">アカウント</a> <div class="dropdown-menu dropdown-menu-right" role="menu"> <div class="d-flex flex-column text-center"> <a class="doropdown-item"><%= link_to"マイページ",user_path(current_user)%></a> <a class="doropdown-item"><%= link_to"ログアウト",destroy_user_session_path, method: :delete%></a> </div> </div> </li> </ul> </nav> </div> </div> <% end %>
テンプレート
<!DOCTYPE html> <html lag="ja"> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <title>OurGoal</title> </head> <body> <div class="justify-content-center"> <%= render partial: 'common/header' %> <div class="row" style="background:#b0c4de"> <%= yield %> <p class="alert"><%= alert %></p> </div> </div> <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> <footer class='text-center'> <p>(C) 2019</p> </footer> </html>
他に記載すべき情報があったら教えてくださいm(__)m
よろしくお願いします。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/28 05:14