Q&A
間違っていたら申し訳ないですが、何回もチェックしたので問題ないと思います。完璧に作動するコードをコピペして挙動を確認したところ、やはりメニューが閉じないのでコード以外の部分で問題があるのではないかなと思っています。でも、どこに問題があるのかちょっとわからないです。
bootstrapを用いてハンバーガーメニューを実装したのですが一回クリックすると普通にメニューが表示され、正常に作動するのですが、再びクリックしてもメニューがしまわれずに何も変わらないままです。どうしたら良いのでしょうか。scriptを追加して見たりしたのですが、解決できませんでした。
完璧に作動するコードをコピペして挙動を確認したところ、やはりメニューが閉じないのでコード以外の部分で問題があるのではないかなと思っています。インストールしたgemが関係するのか調べましたがよくわからなかったです。
scriptはこんな感じで書きました。そして<body>の最終行に加えました。
<script> $('.navbar-toggler').on('click', function(){ $('#navbarMenu').collapse('hide'); }); </script>
_header.html.erb
<nav class="navbar fixed-top navbar-expand-xl top-navbar navbar-light bg-light"> <div class="backbtn"> <%= link_to 'javascript:history.back()', id: "logo" do %> <i class="fas fa-arrow-left"></i> <% end %> </div> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarMenu"> <ul class="navbar-nav"> <li class="nav-item"><%=link_to '使い方', '/howto', :style=>"color:black;",class:"nav-link" %></li> <li class="nav-item"><%=link_to '全てのアカウント', '/accounts/index', :style=>"color:black;",class:"nav-link" %></li> <li class="nav-item"><%=link_to 'ID検索', search_accounts_path, :style=>"color:black;",class:"nav-link" %></li> <li class="nav-item"><%=link_to '設定', edit_account_registration_path, :style=>"color:black;",class:"nav-link" %></li> <li class="nav-item"><%=link_to 'ログアウト', destroy_account_session_path, method: :delete, :style=>"color:black;",class:"nav-link" %></li> </ul> </div> </nav>
gemfile
source 'https://rubygems.org' gem 'rails', '5.1.6' gem 'devise' gem 'whenever', require: false gem 'font-awesome-sass' gem 'faker', '1.7.3' gem 'bootstrap' gem 'puma', '3.9.1' gem 'sass-rails', '5.0.6' gem 'uglifier', '3.2.0' gem 'coffee-rails', '4.2.2' gem 'jquery-rails' gem 'turbolinks', '5.0.1' gem 'jbuilder', '2.6.4' group :development, :test do gem 'sqlite3', '1.3.13' gem 'byebug', '9.0.6', platform: :mri end group :development do gem 'web-console', '3.5.1' gem 'listen', '3.1.5' gem 'spring', '2.0.2' gem 'spring-watcher-listen', '2.0.1' end # Windows環境ではtzinfo-dataというgemを含める必要があります gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.css.scss
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome";
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require jquery3 //= require popper //= require bootstrap //= require turbolinks //= require_tree .
回答2件
0
ベストアンサー
諦めました。。。。。。。
投稿2020/05/08 07:01
退会済みユーザー
総合スコア0
0
<body>の最終行に加えました。
こちらが適切かどうかは気になりますが・・・
もしTurbolinksを利用しているなら下記のように記載する必要があります。
JavaScript
1$(document).on('turbolinks:load', function() { 2 // コード 3});
すいません。上記は適切な答えではありませんでした。
Bootstrapであればきちんと設定されていれば、application.jsに付け加える必要はないかと思います。
下記のNavbarの構造で記載してみてください。
https://getbootstrap.jp/docs/4.4/components/navbar/#supported-content
投稿2020/04/05 08:03
編集2020/04/05 08:10
総合スコア3365
それではapplication.jsを全文追記いただけますか？
追加させていただきました。よろしくお願いします。
application.jsとapplication.css.scss(これはapplication.scssでよい)は問題ないと思います。
ブートストラップのバージョンを指定したらどうなりますか？
gem 'bootstrap', '~> 4.4.1'
またChromeのconsoleにエラーが表示されていないかもあわせて確認いただけますか？
bootstrapのバージョンを指定しbundle installした後にchromeのconsoleを見るとはじめから
DevTools failed to parse SourceMap: http://localhost:8080/headless-content.js.map
とメッセージが出ていました
ハンバーガーアイコンをクリックしても変わらずこれが表示されたままで、新しいメッセージはありませんでした。
よろしくお願いします。
ちなみにbootstrapのデザインはきちんと適用されている認識で大丈夫でしょうか？
nav以外の他の部分ではbootstrapはきちんと意図した通りになっているのできちんと適用できていると思います。
海外のサイトを見てみるとrails5.1でのnavbarがきちんと動かない報告が出ています。
理由がはっきりとしていないのですが、jqueryとの間で問題が起こっている可能性があるような記載がありました。
解決方法として下記の2つがあります。
1.jQueryで開け閉めをさせるようにする。（当初の質問のアプローチ）
2.railsを5.2.4系にする。（ローカルで動作確認済み）
おすすめとしては2ですが、現状のgemのバージョン指定の書き方では問題が起こるかもしれません。
どのようにしてバージョン指定してすれば良いのかご教授頂けますか？
申し訳ありません。
バージョンを固定すると、本来であればbundlerが依存関係などをよしなに設定してるところが崩れてしまいます。
そのためバージョンを指定せずに記載することが多いのではないかと思います。
Gemのバージョン指定の書き方に関しては下記となります。
https://blog.yuhiisk.com/archive/2017/04/24/specify-the-version-of-gemfile.html
またRailsのバージョンアップですが、railsのインストールなどが必要となりますので、適宜、ご自身の環境に合わせて設定頂く形となります。
細かい手順として参考となるのは下記です。
https://qiita.com/jnchito/items/0ee47108972a0e302caf
※特に「Rails以外のgemをバージョンアップする」からが参考になるかもしれません。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。