如何使用 JavaScript 在单击时关闭折叠的侧边栏？

Question

我创建了一个使用动画汉堡菜单图标打开的折叠侧边栏。但是，我无法使用 JavaScript 关闭它。我的目标是在单击动画图标时打开和关闭侧边栏。如果有任何建议，将不胜感激！希望下面的代码足以重现问题。

HTML：

<h1>Sidebar Navigation</h1>

    <div id="mySidebar" class="sidebar">
        <a><i class="fa fa-home"></i> &nbsp;Home</a>
        <a><i class="fa fa-file-text"></i> &nbsp;Menu</a>
        <a><i class="fa fa-user-circle"></i> &nbsp;About</a>
        <a><i class="fa fa-group"></i> &nbsp;Careers</a>
        <a><i class="fa fa-map-marker"></i> &nbsp;Find a Store</a>
    </div>

    <div id="content">
        <div class="openBtn" onclick="myFunction(this)"> 
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
        <p>Content pushed to the right when hamburger icon is clicked on which opens the sidebar.</p>
    </div>

CSS：

h1 {
    text-align: center;
    color: black;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
    position: relative;
    bottom: 60px;
    left: 10px;
    cursor: pointer;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    background-color: #007CC7;
    top: 0;
    left: 0;
    padding-top: 20px;
    z-index: 1;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidebar a {
    padding: 6px 8px 6px 16px;
    display: block;
    font-size: 25px;
    transition: 0.3s;
}

.sidebar a:hover {
    cursor: pointer;
}

#content {
    color: black;
    transition: margin-left 0.5s;
}

a {
    color: white;
}

JavaScript：

function myFunction(x) {
  x.classList.toggle("change");
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("content").style.marginLeft = "250px";
}

Answer 1

调整 myFunction 函数的内部逻辑。在使用 Vanilla.js 触发切换事件之前，先判断这次是否需要调整元素宽度。

您可以点击下面的运行代码sn-p或展开sn-p按钮，看看该功能是否满足您的问题要求。..

function myFunction(x) {
  adjustWidth("mySidebar");
  x.classList.toggle("change");
}

function adjustWidth(id){
  const btnDiv = document.getElementById('content');
  const e = document.getElementById(id);
  const eWidth = e.style.width;
  e.style.width = eWidth == '' ? "250px" : '';
  btnDiv.style.marginLeft = e.style.width;
}

h1 {
    text-align: center;
    color: black;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
    position: relative;
    bottom: 60px;
    left: 10px;
    cursor: pointer;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    background-color: #007CC7;
    top: 0;
    left: 0;
    padding-top: 20px;
    z-index: 1;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidebar a {
    padding: 6px 8px 6px 16px;
    display: block;
    font-size: 25px;
    transition: 0.3s;
}

.sidebar a:hover {
    cursor: pointer;
}

#content {
    color: black;
    transition: margin-left 0.5s;
}

a {
    color: white;
}

<h1>Sidebar Navigation</h1>

<div id="mySidebar" class="sidebar">
    <a><i class="fa fa-home"></i> &nbsp;Home</a>
    <a><i class="fa fa-file-text"></i> &nbsp;Menu</a>
    <a><i class="fa fa-user-circle"></i> &nbsp;About</a>
    <a><i class="fa fa-group"></i> &nbsp;Careers</a>
    <a><i class="fa fa-map-marker"></i> &nbsp;Find a Store</a>
</div>

<div id="content">
    <div class="openBtn" onclick="myFunction(this)"> 
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <p>Content pushed to the right when hamburger icon is clicked on which opens the sidebar.</p>
</div>