Javascript 汉堡包没有'；切换导航栏后无法工作

我将不透明度设置为0以启用我的 导航栏javascript

这就是它在css中的外观：

.nav-open {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 24vh;
  background: #ffafaf;
  display: flex;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transition: 1s ease-in-out;
}

这是javascript代码：

const navBar = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-open");

  burger.addEventListener("click", () => {
    nav.style.opacity = 1;
  });
};

navBar();

所以，当我切换它时，它看起来像。 问题是，我不能切换回（我切换它，但它不切换回）我如何修复它

以下是您需要的HTML代码：

<nav>
      <div class="logo">
        <h1>iCosmetics</h1>
      </div>
      <div class="burger">
        <svg
          class="menu"
          width="30"
          height="16"
          viewBox="0 0 30 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="15"
            y1="15"
            x2="30"
            y2="15"
            stroke="black"
            stroke-width="2"
          />
          <line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
          <line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
        </svg>
      </div>
      <div class="nav-open">
        <div class="contact">
          <h2>Contact</h2>
          <p>3108248125</p>
        </div>
        <div class="social">
          <h2>Social</h2>
          <i class="fab fa-instagram"></i>
          <i class="fab fa-twitter"></i>
        </div>
      </div>
    </nav>

肖像学
接触
3108248125

社会的

您可以添加用于实际显示内容的子类，并在单击时切换此类：

document.queryselectoral（“.burger”）[0]。addEventListener（“单击”，（）=>{
document.queryselectoral（“.nav open”）[0].classList.toggle（'isOpen'）；
});
.nav打开{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
高度：24小时；
背景#ffafaf；
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
不透明度：0；
转换：1s易入易出；
}
.nav-open.isOpen{opacity:1；}

肖像学
接触
3108248125

社会的
非常感谢，它成功了！！！我能知道[0]的用途吗？嗨@WaldoSobrino，很抱歉回复太晚。我在回答中将
querySelector
改为
queryselectoral
，因为我有一个老习惯，在处理类时使用最后一个选项，
[0]
只需选择第一个选项。对于问题的标记，它的作用与
querySelector
完全相同。如果您想进一步了解
querySelector
和
querySelector all
之间的区别，请阅读以下内容：