javascript - jQuery 添加类有效但删除不

Question

我正在尝试在用户单击按钮 (.header_hamburger) 时添加并随后删除一些类，使用以下 jQuery 代码，我可以添加这些类(并删除一个)，但我在撤消我的操作(删除类并仅添加一个)时遇到问题，以便我尝试切换的侧边菜单(我的案例)可以在用户点击时消失。

<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");
});