Question

我将不透明度设置为0以启用我的 navbar导航栏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();

因此，当我切换它时，它看起来像this。问题是我无法将其切换回（我将其切换但不切换回）如何解决？

以下是 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>

Answer 1

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

document.querySelectorAll(".burger")[0].addEventListener("click", () => {
    document.querySelectorAll(".nav-open")[0].classList.toggle('isOpen');
  });

.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;
}
.nav-open.isOpen { opacity: 1;}

<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>

您可以了解更多here。

享受代码！

切换导航栏后，汉堡不起作用

1 个答案: