jquery - 如何在 jQuery 中单击一次切换多个元素？

Question

我正在尝试制作侧边抽屉，我为其添加了一个汉堡包菜单，用户将单击该菜单。然后应打开侧面导航并将汉堡包图标更改为十字按钮。

虽然到目前为止它工作正常，但问题是我无法弄清楚如何关闭侧边导航。

这是我的代码

index.html

<li class="nav-item hide-on-mb icon-box">
  <a href="#" class="nav-link closebtn ">                    
    <i id="sideToggleBtn" class="fas fa-bars"></i>
  </a>
</li>

主要.js

$(document).ready(function() {
  $(".icon-box").click(function() {
    $("#sideToggleBtn").toggleClass("fa-bars fa-times");
    $(".sidenav").css("width", "450px");
  });
});

主.scss

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    background-color: $nav-Color;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

index.html (sidenav)

<div id="mysidenav" class="sidenav">
        <div class="container">
            <div class="brand-wrapper">
                <h1 class="brand-title">
                    Hello
                </h1>
            </div>
            </div>
        </div>
    </div>

Answer 1

如果我能很好地理解问题，我会做类似的事情!

$(document).ready(function() {
    $(".icon-box").click(function() {
        $("#sideToggleBtn").toggleClass("fa-bars fa-times");
        $(".sidenav").toggleClass('sidenav-open');
        $(".sidenav").css("width", $(".sidenav").hasClass('sidenav-open') ? "450px" : "0px");
    });
});