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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1126閲覧

ドロップダウンメニューが開かない場合があります。

tttu

総合スコア26

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/06/26 05:36

問題点

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

gemですでに導入してるのにもかかわらずcdnでも導入してしまったのが原因でした。

投稿2019/06/26 09:29

tttu

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問