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

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

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

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

Bootstrap

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

Q&A

0回答

1169閲覧

bootstrapのハンバーガーメニューが閉じない事に困っています。

jojopro

総合スコア0

Ruby on Rails 6

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

Bootstrap

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

0グッド

0クリップ

投稿2021/01/27 10:33

bootstrapのハンバーガーメニューが閉じない事に困っています。

Rails(Rails6.0.3 )でアプリを作っています。そしてビューのheader部分を作っているのですが、上記のような問題点が発生しました。
bootstrapは4.0を使っています。
ハンバーガーメニューを開けることは可能です。しかし開いた後に、ハンバーガー部分をクリックしても閉じることができません。
調べてみたところ、「turbolinks」の機能が原因のようです。以下は自分なりに原因を具体化した文章ですが、初学者なため、説明が正確ではない部分があると思います。

<navbar navbar-collapse show>は「ハンバーガーメニューが開いている状態」のようです。一方で「ハンバーガーメニューが閉じている状態」は<navbar navbar-collapse>みたいです(つまりshowがあるかどうかの違い)。
しかし、turbolinksによってどうやらメニューを閉じようとしても「show」が復活するようです。
実際に検証ツールで確認したところ、やはりそのようになっていました。

したがって、(その原因の考察が正しいと仮定すると)turbolinksの機能をオフにするのが解決策となるのかなと思います。
しかし、その方法がわからないというのが実際に自分が解決したいことです。

turbolinksのgem自体を消すことが一つの選択肢のようですが、できれば部分的に無効化させたいなと思っています。

(また、そもそも原因の考察そのものが間違っている可能性があるので、もしそうであればご指摘いただけると幸いです。)

該当のソースコード

[header部分]

<header> <nav class="navbar navbar-expand-lg navbar-light " style="background: linear-gradient(#F89174,#FFC778);" > <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="Navbar"> <%= link_to "MM_APLI", home_path, id: "logo" , class:"navbar-brand mr-5" %> <ul class="navbar-nav mr-auto mt-2"> <li class="nav-item active mr-5"> <%= link_to "トップ", home_path, {class: "nav-link"} %> </li> <% if logged_in? %> <li class="nav-item active mr-5"> <%= link_to "新規メモ", new_memo_path, {class: "nav-link"} %> </li> <li class="nav-item dropdown mr-5"> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> プロフィール </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <%= link_to "メモ一覧", current_user, {class: "dropdown-item"}%> <%= link_to "設定", edit_user_path(current_user) , {class: "dropdown-item"}%> <div class="dropdown-divider"></div> <%= link_to "ログアウト", logout_path, class: 'dropdown-item', method: :delete, data: { confirm: "ログアウトしますか" } %> </div> </li> <% else %> <li class="nav-item mr-5"> <%= link_to "ログイン", login_path, {class: "nav-link"} %> </li> <li class="nav-item mr-5"> <%= link_to "新規登録", signup_path, {class: "nav-link"} %> </li> <% end %> <li class="nav-item mr-5"> <a href="https://youtu.be/2Q_ZzBGPdqE" class="nav-link" target="_blank">HELP!</a> </li> </ul> </div> </nav> </header>

headの読み込み部分は以下のようになっています。しかし、Railsの読み込みの仕様への理解が浅いため、アセットパイプラインの読み込みと、ウェブパッカーの読み込みが混合しています。読みにくくて申し訳ありません。
[html head部分]

<head> <title><%= yield(:title) %> | みんなのMEMORYアプリ</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <%= stylesheet_pack_tag 'application' %> <%= javascript_pack_tag 'application' %> <%= render'layouts/shim' %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head>

試したこと

2点試してみました。

headの
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
の部分を…
<%= javascript_pack_tag 'application' %>
に変えてみましたが、結果は変わりませんでした。


[app/javascript/packs/application.js]に

<script> $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){ if(this.id != 'navbarDropdown'){ $('.navbar-collapse').collapse('hide'); } }); </script>

を追記してみましたが、結果は変わらなかったです。

以上が自分が実現したいことと現在の状況の説明でした。何かしらのアドバイス等いただけると幸いです。

不足している情報があれば指摘していただければすぐに追記いたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問