ハンバーガーメニューの挙動について

Question

Word Pressでオリジナルテーマを作っています。
その中で今、ハンバーガーメニューを作成しているのですが、うまく動きをつけられません。解決策を教えていただきたいです。お願いいたします。

######このハンバーガーメニューに付けたい動きは以下の通りです。

1. ホバーしたときに3本線の一番上の線と一番下の線が上下に広がる。
2. クリックすると3本線からバツ印に変わり、ドロップダウンメニューが開く。このバツの状態の時はホバーしても線が動かないようにしたい。
3. 再度クリックすると、最初の3本線の状態に戻り、ドロップダウンメニューも閉じる。

######現在、上手くいかない挙動が以下の通りです。

• 上記の2番のバツの状態の時に、ホバーすると線が動く。上記の1番の挙動がバツの状態のときにも適用されてしまっているようです。

<button type="button" id="navbutton" class="navbutton">
        
 <span></span>
 <span></span>
 <span></span>
              
</button>

//ハンバーガーメニューの見た目
      .navbutton,
      .navbutton span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
      }
      .navbutton {
        position: relative;
        width: 50px;
        height: 44px;
        background: none;
        border: none;
        appearance: none;
        cursor: pointer;
      }
      .navbutton span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #333;
        border-radius: 4px;
      }
      .navbutton span:nth-of-type(1) {
        top: 0;
      }
      .navbutton span:nth-of-type(2) {
        top: 20px;
      }
      .navbutton span:nth-of-type(3) {
        bottom: 0;
      }

//ホバー時の挙動
      .navbutton:not(.active):hover span:nth-of-type(1) {
        top: -6px;
      }
      .navbutton:not(.active):hover span:nth-of-type(3) {
        bottom: -6px;
      }
      
//クリック時の挙動
      .navbutton.active span:nth-of-type(1) {
        transform: translateY(20px) rotate(-45deg);
      }
      .navbutton.active span:nth-of-type(2) {
        opacity: 0;
      }
      .navbutton.active span:nth-of-type(3) {
        transform: translateY(-20px) rotate(45deg);
      }

      .navbutton:focus {
        outline: 0;
      } /*

  jQuery(function() {

//クリック時の挙動
    jQuery('.navbutton').on('click', function () {
      jQuery(this).addClass('active');
    }, function () {
      jQuery(this).removeClass('active');
    });

//ドロップダウンメニューが開く
    jQuery("#navbutton").click(function() {
        jQuery("#header-nav-wrap").slideToggle();   
    });

  }); 

Answer 1

CSSのコメントは //コメント ではないです。/* コメント */ です。まずはこれを修正しましょう。

あと、提示のjQueryコードでは動かないですね。下記に修正してください。

//クリック時の挙動
    jQuery('.navbutton').on('click', function () {
      jQuery(this).toggleClass('active');
    });