javascript - 我的导航图标无法关闭

Question

您好，我正在尝试创建侧面导航，但无法使用第二个函数“onclick()”关闭菜单

导航完美打开，但随后无法关闭。 这是我的 fiddle ，我只是希望获得有关添加 onlick 功能的帮助，该功能可以在再次单击导航图标时关闭导航。

function myFunction(x) {
  x.classList.toggle("change");
  document.getElementById("mySidenav").style.width = "220px";
  document.getElementById("Content").style.paddingLeft = "0px";
  document.body.style.opacity = "0.1";

}

/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  z-index: 400;
  right: 0;
  background-color: #0F0F0F;
  overflow-x: hidden;
  padding-top: 90px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  opacity: 0.8;
}
/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  font-size: 18px;
  text-align: right;
  vertical-align: middle;
  justify-content: center;
  display: flex;
  line-height: 20px;
  color: #FFFFFF;
  transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: #00CB10;
  text-decoration: underline;
}
.menu-icon {
  display: inline-block;
  position: fixed;
  z-index: 500;
  cursor: pointer;
  margin-right: 15px;
  margin-top: 15px;
  margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
  width: 30px;
  height: 4px;
  background-color: #0F0F0F;
  border-radius: 10px;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 5px);
  transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}
/* Rotate last bar */

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

<div id="Menu" class="menu-icon" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="mySidenav" class="sidenav">
  <!--Start Side Nav-->
  <a href="#">Our Story</a>
  <a href="#">Products</a>
  <a href="#">Contact Us</a>
  <a href="#">Login/Sign up</a>
</div>
<!---->

Answer 1

不需要在JS中设置宽度。当菜单打开时，您正在切换一个附加类，您可以使用它。

另一点是你不应该改变主体的不透明度(它也会影响菜单)，而只能改变主要内容的div。 或者显示具有固定位置(100% 宽度和高度、背景和不透明度)的覆盖 div，从而创建禁用内容的效果。

在我的示例中，我注释了不必要的 js 行，并添加了一些 CSS :

function myFunction(x) {
  x.classList.toggle("change");
  //document.getElementById("mySidenav").style.width = "220px";
  //document.getElementById("Content").style.paddingLeft = "0px";
  document.body.style.opacity = "0.1";

}

/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  z-index: 400;
  right: 0;
  background-color: #0F0F0F;
  overflow-x: hidden;
  padding-top: 90px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  opacity: 0.8;
}
/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  font-size: 18px;
  text-align: right;
  vertical-align: middle;
  justify-content: center;
  display: flex;
  line-height: 20px;
  color: #FFFFFF;
  transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: #00CB10;
  text-decoration: underline;
}
.menu-icon {
  display: inline-block;
  position: fixed;
  z-index: 500;
  cursor: pointer;
  margin-right: 15px;
  margin-top: 15px;
  margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
  width: 30px;
  height: 4px;
  background-color: #0F0F0F;
  border-radius: 10px;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 5px);
  transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}
/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -6px);
  transform: rotate(45deg) translate(-8px, -6px);
}
.change + .sidenav {
  width: 220px;
}

<div id="Menu" class="menu-icon" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="mySidenav" class="sidenav">
  <!--Start Side Nav-->
  <a href="#">Our Story</a>
  <a href="#">Products</a>
  <a href="#">Contact Us</a>
  <a href="#">Login/Sign up</a>
</div>
<!---->