如何关闭一个崩溃的侧边栏点击使用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触发toggle事件之前，首先判断这次是否需要调整元素宽度。

您可以单击下面的运行代码段或扩展代码段按钮，以查看该函数是否满足您的问题要求。

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>