問題点
Bootstrapのnavでheaderにドロップダウンメニューを導入しているのですが、ドロップダウンが開く場合と開かない場合があり困っています。
navbarには現在ビューのあるリンクとしてHome画面とEdit画面(ドロップダウン内)へのリンクがあるのですが、それらのリンク先へ遷移した直後にドロップダウンメニューが動かなくなってしまいます。しかし、ブラウザで再読込(更新)するとドロップダウンメニューが動くようになります。
やったこと
jsの問題かと思い調べてみたのですが、なかなか適切な資料も見つからず解決には至っていません。
下記にコードを添付いたします。よろしくお願いいたします。
"routes.rb"
Ruby
1Rails.application.routes.draw do 2 root 'static_pages#home' 3 get '/help' => 'static_pages#help' 4 get '/about' => 'static_pages#about' 5 get '/contact' => 'static_pages#contact' 6 get '/signup' => 'users#new' 7 get '/login' => 'sessions#new' 8 post '/login' => 'sessions#create' 9 delete '/logout' => 'sessions#destroy' 10 resources :users 11 resources :account_activations, only: [:edit] 12 resources :password_resets, only: [:new, :create, :edit, :update] 13end
"_header.html.erb"
HTML
1<nav class="navbar navbar-fixed-top navbar-expand-lg navbar-dark bg-primary"> 2 <div class="container"> 3 <a href="/" class="navbar-brand"> 4 Body-Weight App 5 </a> 6 <ul class="navbar-nav"> 7 <% if logged_in? %> 8 <li><a href="/" class="nav-link">Home</a></li> 9 <li><a href="#" class="nav-link">Help</a></li> 10 11<!--問題のドロップダウン部分です--> 12 <li class="dropdown"> 13 <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 14 Account<span class="caret"></span> 15 </a> 16 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 17 <a href="/users/19/edit" class="dropdown-item">Settings</a> 18 <div class="dropdown-divider"></div> 19 <a href="/logout" class="dropdown-item" rel="nofollow" data-method="delete">Log Out</a> 20 </div> 21 </li> 22<!--以上--> 23 <% else %> 24 <li><a href="#" class="nav-link">Help</a></li> 25 <% end %> 26 </ul> 27 </div> 28</nav>
"custom.scss"
Sass
1@import "bootstrap"; 2 3$main-blue:#428bca; 4$light-gray:#777777; 5 6li{ 7 list-style: none; 8} 9 10 11.dropdown-item{ 12 color:$main-blue; 13} 14 15 16.footer{ 17 margin-top: 100px; 18 border-top: 1px solid $main-blue; 19 small{ 20 float:left; 21 color:$main-blue; 22 } 23 ul{ 24 float:right; 25 } 26 li{ 27 float:left; 28 margin-left: 15px; 29 } 30 a{ 31 color:$main-blue; 32 } 33}
"application.js"
Javascript
1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5// vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. JavaScript code in this file should be added after the last require_* statement. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12// 13//= require rails-ujs 14//= require activestorage 15//= require turbolinks 16//= require_tree . 17//= require bootstrap 18//= require bootstrap-sprockets
"_head.htnl.erb"
HTML
1<head> 2 <title><%= full_title(yield(:title)) %></title> 3 <%= csrf_meta_tags %> 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 5 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 6 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 7</head>
"application.html.erb"
HTML
1<!DOCTYPE html> 2<html> 3 <%= render "layouts/head"%> 4 <body> 5 <%= render "layouts/header" %> 6 <div class="container"> 7 <%= render "layouts/flash" %> 8 <%= yield %> 9 <%= render 'layouts/footer' %> 10 </div> 11 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 13 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 14 </body> 15</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。