jQueryがクラスを追加していますが削除しません

Question

ユーザーがボタン（.header_hamburger）をクリックすると、次のjQueryコードでクラスを追加したり削除したりすることができます私は、ユーザーがクリックするとトグルしようとしているサイドメニュー（私の場合）が消えるように、私の動作を逆転させて（クラスを削除して1つだけ追加する）問題を抱えています。

<div class="header header--mic"> 
    <div class="header__inner"> 
     <div class="header__hamburger" id="button-add"> 
      <div id="box" class="nav-icon"></div> 
     </div> 
    </div> 
    <div class="header__site-nav"> 
     <div class="site-nav site-nav--hidden"></div> 
    </div> 
</div> 


    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(document).on("click", ".header__hamburger", function() { 
       $('div.nav-icon').addClass("nav-icon--x nav-icon--white"); 
       $('div.header.header--mic').addClass("header--site-nav-expanded"); 
       $('div.header__site-nav').addClass("header__site-nav--expanded"); 
       if ($('div.site-nav').hasClass("site-nav--hidden")) { 
        $('div.site-nav').removeClass("site-nav--hidden"); 
       } 
      }); 
     }); 

</script> 

Answer 1

toggleClass()の機能を使用できませんか？

$(document).ready(function() { 
 
    $('div.nav-icon').addClass("nav-icon--x nav-icon--white"); 
 
    $('div.header.header--mic').addClass("header--site-nav-expanded"); 
 
    $('div.header__site-nav').addClass("header__site-nav--expanded"); 
 
    $('div.site-nav').toggleClass("site-nav--hidden"); 
 
});

Answer 2

私はあなたがこの

$(".site-nav--hidden").hide(); 

$(".site-nav--hidden").show();