ハンバーガーメニューが三本線→×にならない

実現したいこと

ハンバーガーメニューを三本線→×に変化させたい

前提

初歩的な質問ですみません。
独学でGW中にフロントエンド言語を触り始めたばかりの初心者です。
VScodeにて、HTML,CSS,JavaScript(jQuery)のコードを記述しています。

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

ハンバーガーメニューの三本線を×にするコードを記述したつもりだったのですが、
三本線を押しても×にならず、三本線のままです。
ハンバーガーメニューを押せば、表示されて欲しいメニューは表示されます。

該当のソースコード

html
1<link href="../css/common.css" rel="stylesheet">
2
3<button class="toggle-menu-button">
4    <span></span><span></span><span></span>
5</button>
6
7<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
8<script src="../js/toggle-menu.js"></script>

css
1.toggle-menu-button {
2    display: block;
3    position: relative;
4    background: #fccad5;
5    cursor: pointer;
6    justify-content: center;
7    align-items: center;
8    width: 44px;
9    height: 34px;
10    border: none;
11    border-radius: 0px;
12    outline: none;
13}
14
15  /*ボタン内側*/
16.toggle-menu-button span {
17    display: inline-block;
18    transition: all .4s;
19    position: absolute;
20    left: 12px;
21    height: 3px;
22    border-radius: 2px;
23    background: #fff;
24    width: 45%;
25}
26
27.toggle-menu-button span:nth-of-type(1) {
28    top: 7px;
29}
30
31.toggle-menu-button span:nth-of-type(2) {
32    top: 15px;
33}
34
35.toggle-menu-button span:nth-of-type(3) {
36    top: 23px;
37}
38
39  /*is-showクラスが付与されると線が回転して×に*/
40.toggle-menu-button.is-show span:nth-of-type(1) {
41    top: 18px;
42    left: 18px;
43    transform: translateY(6px) rotate(-45deg);
44    width: 30%;
45}
46
47.toggle-menu-button.is-show span:nth-of-type(2) {
48    opacity: 0;/*真ん中の線は透過*/
49}
50 
51.toggle-menu-button.is-show span:nth-of-type(3) {
52    top: 30px;
53    left: 18px;
54    transform: translateY(-6px) rotate(45deg);
55    width: 30%;
56}

js
1window.addEventListener('load', function () {
2    var $button = document.querySelector('.toggle-menu-button');
3    var $menu = document.querySelector('.header-site-menu');
4    $button.addEventListener('click', function () {
5        if ($menu.classList.contains('is-show')) {
6            $menu.classList.remove('is-show');
7        }
8        else {
9            $menu.classList.add('is-show');
10        }
11    });
12});

試したこと

こちらのサイトを参考にしました。
https://coco-factory.jp/ugokuweb/move01/5-2-1/

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

回答2件

javascript
1document.addEventListener('click',({target})=>{
2  let t;
3  if(t=target.closest('.toggle-menu-button')){
4    t.classList.toggle('is-show');
5  }
6});

投稿2023/05/09 03:45

yambejp

総合スコア114863

js
1        if ($menu.classList.contains('is-show')) {
2            $menu.classList.remove('is-show');
3        }
4        else {
5            $menu.classList.add('is-show');
6        }