Q&A
実現したいこと
jQueryでハンバーガーメニューが正常に動作するようにしたい
前提
・jQueryインストール済み
・Webpack設定済み
・application.js設定済み
発生している問題・エラーメッセージ
ポートフォリオ用にRails6でアプリを作成しています。
ヘッダー部分にハンバーガーメニューを実装しようとしたところ、初めは動作するのですが、他ページのリンクに一度推移したあとメニューボタンを押してもメニューが開かず反応しなくなります。
該当のソースコード
application.html.erb
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>ProfileApp</title> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 9 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 10 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 11 <script type="text/javascript"> 12 $(function(){ 13 //hamburger menu click 14 $('#nav_toggle').click(function(){ 15 $("#top-head").toggleClass('open'); 16 $("nav").slideToggle(500); 17 }); 18 //menu link click 19 $('nav a').click(function(){ 20 if(window.innerWidth <= 680){ 21 $("#top-head").toggleClass('open'); 22 $("nav").slideToggle(500); 23 } 24 }); 25 }); 26 </script> 27 </head> 28 29 <body> 30 <header id="top-head"> 31 <div class="inner"> 32 <h1><%= link_to “タイトル”, "/", class:"image-top" %></h1> 33 <div id="nav_toggle"> 34 <div> 35 <span></span> 36 <span></span> 37 <span></span> 38 </div> 39 </div> 40 <nav> 41 <ul> 42 <% if user_signed_in? %> 43 <li><%= current_user.name %>ログイン中</li> 44 <li><%= link_to "設定", '/users/account' %></li> 45 <li><%= link_to "ログアウト", :destroy_user_session %></li> 46 <% else %> 47 <li><%= link_to 'ゲストログイン(閲覧用)', users_guest_sign_in_path, method: :post, class: "login" %></li> 48 <li><%= link_to "新規登録", :new_user_registration %></li> 49 <li><%= link_to "ログイン", :new_user_session %></li> 50 <% end %> 51 </ul> 52 </nav> 53 </div> 54 </header> 55 <main> 56 <%= yield %> 57 </main> 58 <footer> 59 <ul class="menu"> 60 <li><%= link_to "利用規約", page_path('terms')%> </li> 61 <li><%= link_to "プライバシーポリシー", page_path('privacy_policy') %> </li> 62 </ul> 63 <p class="copyright">フッター</p> 64 </footer> 65 </body> 66</html>
application.js
1import Rails from "@rails/ujs" 2import Turbolinks from "turbolinks" 3import * as ActiveStorage from "@rails/activestorage" 4import "channels" 5require('jquery') 6 7Rails.start() 8Turbolinks.start() 9ActiveStorage.start()
試したこと
こちらを参考に下記をbody要素の最後に追記しましたが改善せず。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/29 08:39