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

Question

実現したいこと

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

前提

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

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

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

該当のソースコード

<link href="../css/common.css" rel="stylesheet">

<button class="toggle-menu-button">
    <span></span><span></span><span></span>
</button>

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="../js/toggle-menu.js"></script>

.toggle-menu-button {
    display: block;
    position: relative;
    background: #fccad5;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 34px;
    border: none;
    border-radius: 0px;
    outline: none;
}

  /*ボタン内側*/
.toggle-menu-button span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 12px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    width: 45%;
}

.toggle-menu-button span:nth-of-type(1) {
    top: 7px;
}

.toggle-menu-button span:nth-of-type(2) {
    top: 15px;
}

.toggle-menu-button span:nth-of-type(3) {
    top: 23px;
}

  /*is-showクラスが付与されると線が回転して×に*/
.toggle-menu-button.is-show span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.toggle-menu-button.is-show span:nth-of-type(2) {
    opacity: 0;/*真ん中の線は透過*/
}
 
.toggle-menu-button.is-show span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

window.addEventListener('load', function () {
    var $button = document.querySelector('.toggle-menu-button');
    var $menu = document.querySelector('.header-site-menu');
    $button.addEventListener('click', function () {
        if ($menu.classList.contains('is-show')) {
            $menu.classList.remove('is-show');
        }
        else {
            $menu.classList.add('is-show');
        }
    });
});

試したこと

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

Answer 1

document.addEventListener('click',({target})=>{
  let t;
  if(t=target.closest('.toggle-menu-button')){
    t.classList.toggle('is-show');
  }
});

Answer 2

        if ($menu.classList.contains('is-show')) {
            $menu.classList.remove('is-show');
        }
        else {
            $menu.classList.add('is-show');
        }

スタイルシートでは .toggle-menu-button.is-show のようにセレクタを指定しているので、このコードの $menu は $button にすべきでは。

あと、contains() remove() add() ではなく $button.classList.toggle('is-show') の1行でよいでしょう。