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

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

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

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

Q&A

0回答

856閲覧

jQueryでハンバーガーメニュー実装における不具合

Ms.suger

総合スコア3

Ruby on Rails 5

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

0グッド

0クリップ

投稿2021/12/10 02:26

Cloud9を用いて、WEBサイトを作成しております。
jQueryを用いてハンバーガーメニュー実装したところ jquery_ujs と rails-ujsのうち、 rails-ujs しか読み込まれず、悩んでいます。

##コンソール
コンソールを確認したところ、以下の3つのエラーが発生しておりました。

#####1つめ
Uncaught Error: If you load both jquery_ujs and rails-ujs, use rails-ujs only.
at rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1:646
at rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1:713
at rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1:714
at rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1:721

turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7 You are loading Turbolinks from a <script> element inside the <body> element. This is probably not what you meant to do!

Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.

For more information, see: https://github.com/turbolinks/turbolinks#working-with-script-elements

——
Suppress this warning by adding a data-turbolinks-suppress-warning attribute to: <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script>

#####2つめ
GET https://7bb381d7af084a879edfef93fac28f37.vfs.cloud9.ap-northeast-1.amazonaws.com/members/script.js net::ERR_ABORTED 404

##コード

members/members/show.html.erb

ruby

1---------(略)--------- 2 <div class="row"> 3 <div class="hamburger"> 4 <span></span> 5 <span></span> 6 <span></span> 7 </div> 8 9 <nav class="globalMenuSp"> 10 <ul> 11 <li><a href="#">Profile</a></li> 12 <li><a href="#">Member Infomation</a></li> 13 <li><a href="#">Aim</a></li> 14 </ul> 15 </nav> 16 17---------(略)--------- 18 19 </div>

asset/stylesheet/members/members.scss

ruby

1.hamburger { 2 display : block; 3 position: fixed; 4 z-index : 3; 5 right : 13px; 6 top : 12px; 7 width : 42px; 8 height: 42px; 9 cursor: pointer; 10 text-align: center; 11 -webkit-transition: 0.5s all; 12 -moz-transition : 0.5s all; 13 transition : 0.5s all; 14} 15.hamburger span { 16 display : block; 17 position: absolute; 18 width : 30px; 19 height : 2px ; 20 left : 6px; 21 background : #555; 22} 23.hamburger span:nth-child(1) { 24 top: 10px; 25} 26.hamburger span:nth-child(2) { 27 top: 20px; 28} 29.hamburger span:nth-child(3) { 30 top: 30px; 31} 32 33/* ナビ開いてる時のボタン */ 34.hamburger.active{ 35 -webkit-transform: rotate(360deg); 36 transform: rotate(360deg); 37} 38.hamburger.active span:nth-child(1) { 39 top : 16px; 40 left: 6px; 41 background : #fff; 42 -webkit-transform: rotate(-45deg); 43 -moz-transform : rotate(-45deg); 44 transform : rotate(-45deg); 45} 46.hamburger.active span:nth-child(2) { 47 top: 16px; 48 background : #fff; 49 -webkit-transform: rotate(45deg); 50 -moz-transform : rotate(45deg); 51 transform : rotate(45deg); 52} 53.hamburger.active span:nth-child(3) { 54 opacity: 0; 55} 56 57nav.globalMenuSp { 58 position: fixed; 59 z-index : 2; 60 top : 0; 61

app/aseets/javasqripts/members/sqripts.js

ruby

1$(function() { 2 $('.hamburger').click(function() { 3 $(this).toggleClass('active'); 4 5 if ($(this).hasClass('active')) { 6 $('.globalMenuSp').addClass('active'); 7 } else { 8 $('.globalMenuSp').removeClass('active'); 9 } 10 }); 11}); 12

layouts/aplication.html.erb

ruby

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>AAA</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 8 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 9  <%= Gon::Base.render_data %><!--Gon使用--> 10 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 11 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 12 </head> 13 14 <body> 15 16 <%= yield %> 17 18 <%= render 'layouts/footer' %> 19 20 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 21 <script src="script.js"></script> 22 23 24 </body> 25</html>

###行ってみたエラーの対応
①jQueryの実装確認。
https://www.sejuku.net/blog/57790m
上記の記事を参考に実装確認。問題なく実装されていました。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

の記述をBodyに移動させてみましたが変化はありませんでした。


sqripts.jsファイルをjavasqriptsの直下に移動させましたが、変化ありませんでした。

<script src="script.js"></script>を<script src="members/script.js"></script>に

記述を変えてみましたが変化はありませんでした。

###実装にあたって参考にしたサイト
https://crestadesign.org/what-javscript/
https://crestadesign.org/jquery/
https://crestadesign.org/humbarger/
https://knoweb.net/html-css/css/responsive-hamburgermenu/
https://www.sejuku.net/blog/57790

また、エラー内容に関してhttps://teratail.com/questions/134650を参考にしましたが、解決致しませんでした。

初心者のため、拙い説明となってしまい申し訳ないのですが、お力添えいただけないでしょうか?
また、情報が不足していればご指摘ください。
よろしくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問