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

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
上記の記事を参考に実装確認。問題なく実装されていました。

②

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

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

④

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

###実装にあたって参考にしたサイト
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を参考にしましたが、解決致しませんでした。

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

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

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

関連した質問