JQuery が効かない

JQueryを用いてフルスクリーンメニューを表示・非表示させたいのですが、ハンバーガーメニューまでは動いてもフルスクリーンメニューは表示されません。コンソールの方で写真のようなエラーが出ており、自分で調べてみたのですがわかりませんでした。丸投げで申し訳ないのですが、ご教授いただけますと幸いです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="stylesheet" href="./css/html5reset-1.6.1.css">
8  <link rel="stylesheet" href="./css/style.css">
9  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" >
10  <title>クリスタ初級</title>
11</head>
12
13<body>
14
15  <!--ヘッダー-->
16
17  <header>
18    <div class="header-container">
19      <a class="site-title" href='#'>クリ★スタ</a>
20      <div class="nav-wrapper">
21        <nav class="header-nav">
22          <ul class="nav-list">
23            <li class="nav-item"><a href="#about">About</a></li>
24            <li class="nav-item"><a href="#service">Service</a></li>
25            <li class="nav-item"><a href="#news">News</a></li>
26            <li class="nav-item"><a href="#contact">Contact</a></li>
27          </ul>
28        </nav>
29      </div>
30      <button class="burger-btn" id="gnav">
31        <span class="bars">
32          <span class="bar bar_top"></span>
33          <span class="bar bar_mid"></span>
34          <span class="bar bar_bottom"></span>
35        </span>
36      </button>
37    </div>
38  </header>
39
40省略
41
42  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
43    </script>
44   <script src="script.js"></script>
45</body>
46</html>

css
1@charset "utf-8";
2
3body {
4  color: #000;
5  font-family: Roboto, 'Noto Sans CJK JP', sans-serif;
6}
7
8/*----------------ヘッダー-------------*/
9
10header {
11  height: 75px;
12  border-bottom: 1px solid #fff;
13  background-color: #1B1310;
14}
15
16.header-container {
17  max-width: 1200px;
18  margin: 0 auto;
19  display: flex;
20  justify-content: space-between;
21}
22
23a.site-title {
24  font-size: 26px;
25  color: #fff;
26  line-height: 75px;
27  text-decoration:none;
28}
29
30.nav-list {
31  display: flex;
32}
33
34.nav-item {
35  margin-right:40px;
36}
37
38.nav-list,a {
39  text-decoration: none;
40  color: #fff;
41  font-size: 16px;
42  line-height: 75px;
43}
44
45.burger-btn {
46  display: none;
47}
48
49
50@media screen and (max-width:768px) {
51
52  /*--------------ヘッダー----------*/
53  /* .header-nav {
54    display: none;
55  } */
56  
57  /*--------------ハンバーガーメニュー----------*/
58  .burger-btn {
59    padding:0;
60    display: block;
61    border: none;
62    border-radius: 0;
63    width: 25px;
64    height: 25px;
65    background-color: #1B1310;
66    border-radius: 50%;
67    outline-style: none;
68    z-index: 3;
69    cursor: pointer;
70    margin: 25px 0 !important;
71  }
72  
73  .bar {
74    display: block;
75    width: 25px;
76    height: 2px;
77    background-color: #fff;
78    z-index: 10;
79  }
80  
81  .bar_top {
82    transform: translateY(-6px);
83  }
84  
85  .bar_bottom {
86    transform: translateY(6px);
87  }
88  
89  .nav-wrapper {
90    width: 100vw;
91    height: 100vh;
92    position: fixed;
93    top: 0;
94    left: 0;
95    z-index: 2;
96    display: none;
97  }
98  
99  .header-nav {
100    width: 100%;
101    height: 100%;
102    background-color: #1B1310;
103    z-index: 2;
104  }
105  
106  .header-nav .nav-list {
107    display: block;
108    position: absolute;
109    top: 50%;
110    left: 50%;
111    transform: translate(-50%, -50%);
112    text-align: center;
113  }
114  
115  .header-nav .nav-item {
116    margin-right: 0;
117    margin-bottom: 40px;
118  }
119  
120  .burger-btn.close .bar_top{
121    transform: translateY(2px) rotate(45deg);
122    transition: transform .3s;
123  }
124  
125  .burger-btn.close .bar_mid {
126    opacity: 0;
127    transition: opacity .3s;
128  }
129  
130  .burger-btn.close .bar_bottom {
131    transform: translateY(-2px) rotate(-45deg);
132    transition: transform .3s;
133  }
134  
135  body.noscroll {
136    overflow: hidden;
137  }
138
139  .show {
140    display: block;
141  }
142

JS
1'use strict';
2
3$(function(){
4
5  $('.burger-btn').on('click', function(){
6    $('.burger-btn').toggleClass('close');
7    $('.nav-wrapper').fadeToggle(500);
8    $('body').toggleClass('noscroll');
9  });
10
11});

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

回答3件

ベストアンサー

slim版はかなり機能が削られています。

jQuery 3.0のスリムビルド版で使えないメソッド等を確認してみた

削られた機能を使っていた場合、当然ながら呼び出せませんのでエラーとなります。

投稿2021/03/01 07:13

m.ts10806

総合スコア80875

ohkami

2021/03/01 07:23

ありがとうございます！解決いたしました！

m.ts10806

2021/03/01 07:28

結局「2に戻す」対応したのでしょうか「3の通常版使う」対応したのでしょうか後者であれば対応したことと選んだ回答が合致してません。

ohkami

2021/03/01 08:26

すみません、間違えてしまいました！3の通常版を使って解決致しましたので、ベストアンサーにさせて頂きます！ありがとうございました！

m.ts10806

2021/03/01 08:28

解決されたようで何よりです。初歩的かどうかというと微妙です。「関数が未定義である」までは分かるでしょうけど、なぜかというところは余程経験ないとキーワード出てこないです。

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

html
1  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">

Download jQueryによると、

You can also use the slim build, which excludes the ajax and effects modules:

スリム版には effects が入っていません。fadeToggle()はeffectsの一部です。URLから .slim を抜けばとりあえず動くと思います。

投稿2021/03/01 07:14

int32_t

総合スコア21679

ohkami

2021/03/01 07:23

ありがとうございます！解決いたしました！

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

追記　m.ts10806様の回答が的確化と思いますっ

ぎゃー申し訳ございませんっ
参考にしちゃだめよ！と追記して送信したら「ページがありません」にっ

この回答は見落としと知識不足による的外れな助言ですっ

2系の通常版を入れれば動く可能性もございますが、
3系の通常版をお使いいただくことをおすすめしますっ

ちょっと確認させていただきたいのですが、
JQueryの2系で組んだコードを使いまわしてませんか？

最近似たような質問で、
「jQueryの3系に移行しようとしたらハンバーガーメニューが動かなくなった」
というものがありました。

読み込みを2系に戻すと動くかも？

投稿2021/03/01 07:12

編集2021/03/01 07:27

退会済みユーザー

総合スコア0

ohkami

2021/03/01 07:22

ありがとうございます！エラーが起こった時の対処法を調べたサイトに載っていたのを使っていたのですが、古い物だったんですね。いかにも初心者のミスでお恥ずかしいですが、ご教授いただきありがとうございました！！！

退会済みユーザー

2021/03/01 07:29

ごめんなさいっ、この回答ではなく、m.ts10806様の回答にベストアンサーが移せるようであれば移していただけると助かります。似たような質問をされていた方が、逆のことをして動かないと言われていたので、2系→3系で起きるエラーだと誤って認識しておりました。当方の知識不足でご迷惑をおかけして申し訳ございませんっ

m.ts10806

2021/03/01 07:29

的外れとは思いませんが2に戻すのは悪手とは思います

ohkami

2021/03/01 08:24

すみません！こちらこそ知識不足で、、ベストアンサー移させて頂きました。ありがとうございます！

退会済みユーザー

2021/03/01 08:52

m.ts10806様ありがとうございます。運用しているサイトだと止めるとマズいため、戻せるなら動く状態に戻してから対策した方がと思ったのですが、次からは「戻せる場合は先に動く状態に戻してから考えましょう」と一言つけるようにします。細かい仕様までは把握していなかったため、勉強になりました。ありがとうございます。

退会済みユーザー

2021/03/01 08:53

ohkami様ベストアンサーを移してくれてありがとうございます！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

JQuery が効かない

この回答は見落としと知識不足による的外れな助言ですっ

関連した質問