有没有办法在 closeNav 功能上轻松地将我的汉堡菜单图标改回三行？

Question

我正在尝试创建一个在单击菜单图标时打开和关闭的汉堡菜单。当我第一次打开导航时，背景颜色调整为 100% 的宽度，三行过渡/更改为“X”。但是，当我再次单击“X”关闭导航时，背景宽度变为 0%，但图标没有改变。

我也在尝试使用 JavaScript 来执行此操作。虽然我不确定实现汉堡菜单功能的最简单方法是什么。

目前我尝试使用 onclick 函数和 x.classList.toggle("change");更改菜单图标。

HTML

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav(this)"></a>

</div>

  <span style="font-size:30px;cursor:pointer" onclick="openNav(this)">
 <div class="line1"></div>
<div class="line2"></div>
  <div class="line3"></div>
</span>

CSS

 body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
 background-color: #111;
overflow-x: hidden;
transition: 0.5s;
 padding-top: 60px;
opacity:0.6;
}

.sidenav a {
 padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
 display: block;
 }

.sidenav a:hover {
 color: #f1f1f1;
 }

 .line1, .line2, .line3{
  width:35px;
 height:2px;
 background-color:black;
 margin:6px 0;
 transition:0.3s;
 }


 .change .line1 {
 -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  -webkit-transition: 0.3s ease;
  }

.change .line2 {opacity: 0;}

 .change .line3 {
   -webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-7px, -2px);
    -webkit-transition: 0.3s ease;

 }

   @media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

JAVASCRIPT

   function openNav(x) {
  document.getElementById("mySidenav").style.width = "100%";
  x.classList.toggle("change");

  }


 function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
 x.classList.toggle("change");
  }

Answer 1

您向 burger 中添加类并从 #mySidenav > a 中删除类的错误

在下一个示例中，我将展示它是如何工作的。

HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" style="background:red" onclick="closeNav()"></a>
</div>
<span id="burger" style="font-size:30px;cursor:pointer" onclick="openNav()">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</span>

JAVASCRIPT：

function openNav() {
    mySidenav.style.width = "100%";
    burger.classList.add("change");
}

function closeNav() {
    mySidenav.style.width = "0";
    burger.classList.remove("change");
}

// mySidenav == document.getElementById("mySidenav")
// burger == document.getElementById("burger ")

Codepen example