rails でブートストラップのトグルメニューが使えない

題名のとおり bootstrap のトグルダウンがつかえません。別のコードで jquery が使えることは動作確認したのですが、 bootstrap の css は動いたのですが、javascript になると動きません。どうしたらいいでしょうか？

ruby
1#app/assets/javascripts/application.js
2//= require bootstrap
3//= require jquery
4//= require jquery_ujs
5//= require turbolinks
6//= require_tree .
7//= require jquery-ui

ruby
1#Gemfile
2source 'https://rubygems.org'
3
4git_source(:github) do |repo_name|
5  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
6  "https://github.com/#{repo_name}.git"
7end
8
9
10gem 'rails', '~> 5.1.1'
11gem 'sqlite3'
12gem 'puma', '~> 3.7'
13gem 'sass-rails', '~> 5.0'
14gem 'uglifier', '>= 1.3.0'
15gem 'coffee-rails', '~> 4.2'
16gem 'turbolinks', '~> 5'
17gem 'jbuilder', '~> 2.5'
18gem 'bcrypt', '~> 3.1.7'
19gem 'bootstrap-sass'
20gem 'jquery-rails'
21gem 'less-rails', git: 'https://github.com/MustafaZain/less-rails'
22gem 'jquery-rails'
23gem 'bootstrap-sass'
24gem 'twitter-bootstrap-rails'
25gem 'therubyracer'
26gem 'jquery-ui-rails'

ruby
1#app/views/layouts/application.html.erb
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>RonbunMatome</title>
6    <%= csrf_meta_tags %>
7
8    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
10  </head>
11
12  <body>
13
14<nav class="navbar navbar-default navbar-fixed-top">
15  <div class="container">
16    <div class="navbar-header">
17      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
18        <span class="sr-only">Toggle navigation</span>
19        <span class="icon-bar"></span>
20        <span class="icon-bar"></span>
21        <span class="icon-bar"></span>
22      </button>
23      <a class="navbar-brand" href="#">Project name</a>
24    </div>
25    <div id="navbar" class="collapse navbar-collapse">
26      <ul class="nav navbar-nav">
27        <li class="active"><a href="#">Home</a></li>
28        <li><a href="#about">About</a></li>
29        <li><a href="#contact">Contact</a></li>
30        <li class="dropdown">
31          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
32          <ul class="dropdown-menu" role="menu">
33            <li><a href="#">Action</a></li>
34            <li><a href="#">Another action</a></li>
35            <li><a href="#">Something else here</a></li>
36            <li class="divider"></li>
37            <li class="dropdown-header">Nav header</li>
38            <li><a href="#">Separated link</a></li>
39            <li><a href="#">One more separated link</a></li>
40          </ul>
41        </li>
42      </ul>
43    </div><!--/.nav-collapse -->
44  </div>
45</nav>    
46
47
48<%= yield %>
49  </body>
50</html>
51
52
53
54

行動規範の内容に同意します

回答1件

ベストアンサー

jquery-uiとbootstrapは基本的に競合します。
共存させる方法もありますが、そもそも、目的が被っているのでどちらかに
統一する方が都合がいいと思います。
application.jsの
//= require jquery-ui
を消去して
rake asset:precompile
jquery-uiベースで動いているUIはbootstrapでの代替を探してください。

なおブラウザのキャッシュを消去する必要があるかもしれません。

投稿2017/05/15 04:57

編集2017/05/15 09:36

moke

総合スコア2241

bouyomisan

2017/05/15 09:05

消してみたのですが、動きませんでした・・・ Gemfile から gem 'jquery-ui-rails' を消して bundle したのですが、うまくいきませんでした。どのようにしたらいいのでしょうか？

moke

2017/05/15 09:37 編集

bundle？ application.jsの //= require jquery-ui を消すんですよそして rake assets:precompile 設定にもよりますが通常gemだけではjsは反映されません。あとブラウザのキャッシュの削除が必要な場合もあります。わかりぬくかったみたいなので、回答も修正しておきます。

行動規範の内容に同意します