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>

main.js

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

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

Answer 2

制作一个具有属性的类 width: 450px 并切换它看到这支笔 https://codepen.io/TheOneWhoCodes/pen/VJyLdj

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

2 个答案: