ハンバーガメニューボタンを✖しるしにしたい

前提・実現したいこと

発生している問題・エラーメッセージ

三本線がまとまったまま動かない、機能しない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
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    <title>Document</title>
8    <link rel="stylesheet" href="./style.css">
9    
10</head>
11<body>
12    <header>
13        <a href="#" class="menubutton" id="menubutton">
14            <div></div>
15            <div></div>
16            <div></div>
17        </a><!-- /.menuButton -->
18    </header>
19    <main>
20        <h1>ハンバーガメニュー・ドロワーメニュー</h1>
21    </main>
22<script src="./jquery-3.6.0.min.js"></script>
23<script src="./script.js"></script>
24</body>
25</html>

CSS
1@charset "utf-8";
2
3*, *::before,*::after{
4    box-sizing: border-box;
5}
6
7a{
8    text-decoration: none;
9}
10main{
11    height: 200vh;
12}
13.menubutton{
14    display: block;
15    height: 80px;
16    width: 80px;
17    background-color: pink;
18    position: fixed;
19    top: 0%;
20    right: 0px;
21}
22.menubutton div{
23    height: 1px;
24    width: 60%;
25    background-color: #333;
26    position: absolute;
27    top: 50%;
28    left: 50%;
29    transform: translate(-50%,-50%);
30    transition: .3s;
31}
32.menubutton:nth-of-type(1){
33    transform: translate(-50%,-15px);
34}
35.menubutton .div:nth-of-type(3){
36    transform: translate(-50%,-15px);
37}
38
39/*active*/
40.menubutton.active div:nth-of-type(2){
41    opacity: 0;
42}
43
44.menubutton.active div:nth-of-type(1){
45    transform: rotate(45dge) translate(-50%,-15px);
46}
47.menubutton.active div:nth-of-type(3){
48   transform: rotate(-45dge) translate(-50%,15px); 
49
50}
51

JQ
1 $(function(){
2    $(".menubutton").on('click', function(){
3        $(this).classList.toggle("active");
4    }) 
5
6 });

試したこと

JQの確認。classListの使い方やtoggleの意味を確認し調べました
toggle
transform: roate

結果、そもそもCSSが機能していない？という推測をもとにcssの相対パスや名前間違いを確認しましたが見つかりませんでした。
恐れ入りますが、何卒よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

追記

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

回答2件

jQueryオブジェクトにclassListというプロパティはないです。
element.classList と勘違いをしているのではないかと思います。

解決方法ですが、this.classList.toggle("active")か$(this).toggleClass("active")かではないかと思います。

投稿2021/09/22 07:01

Lhankor_Mhy

総合スコア36163

free_teku

2021/09/22 07:11

ご回答ありがとうございます後者の方で行いましたが、結論機能しません（不変）でした。

Lhankor_Mhy

2021/09/22 07:23

typoがありますよ。 https://developer.mozilla.org/ja/docs/Web/CSS/angle

free_teku

2021/09/22 07:34

ありがとうございます。助かりました。m(__)m 本当にありがとうございます。

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

ベストアンサー

誤りが多過ぎます。

diff
1@@ -29,11 +29,11 @@
2     transform: translate(-50%,-50%);
3     transition: .3s;
4 }
5-.menubutton:nth-of-type(1){
6+.menubutton div:nth-of-type(1){
7     transform: translate(-50%,-15px);
8 }
9-.menubutton .div:nth-of-type(3){
10-    transform: translate(-50%,-15px);
11+.menubutton div:nth-of-type(3){
12+    transform: translate(-50%,15px);
13 }
14 
15 /*active*/
16@@ -42,9 +42,9 @@
17 }
18 
19 .menubutton.active div:nth-of-type(1){
20-    transform: rotate(45dge) translate(-50%,-15px);
21+    transform: translateX(-50%) rotate(45deg);
22 }
23 .menubutton.active div:nth-of-type(3){
24-   transform: rotate(-45dge) translate(-50%,15px); 
25+   transform: translateX(-50%) rotate(-45deg);
26 
27 }

diff
1@@ -1,6 +1,6 @@
2  $(function(){
3     $(".menubutton").on('click', function(){
4-        $(this).classList.toggle("active");
5+        $(".menubutton").toggleClass("active");
6     }) 
7 
8  });