汉堡导航栏激活问题

Question

我在使它起作用时遇到了问题...我观看了一个教程（不老），并密切关注。有人能看到此代码有问题吗，或者为什么它不起作用？我已经开始过多次了，但是都是同样的问题。汉堡在那里，但是当我单击它时什么也没有发生。HTML

          <ul class="nav__links">
            <li><a class="hvr-reveal hjem" href="index.php">Home</a></li>
            <li><a class="hvr-reveal status" href="status.html">WEB Status</a></li>
            <li><a class="hvr-reveal weather" href="#">Weather</a></li>
            <li><a class="hvr-reveal adventure" href="info.html">Adventure</a></li>
          </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>

CSS

.burger {
  display: none;
  cursor: pointer;
}

.burger div{
   width: 25px;
   height: 2px;
   background-color: white;
   margin: 5px;
}

@media screen and (max-width:768px){
  body {
    overflow-x: hidden;
  }
  .nav__links {
    position: absolute;
    right: 0px;
    height: 92vh;
    background-color: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 8vh;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav__links li{
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

Java脚本

const navSlide = () => {
   const burger = document.querySelector('.burger');
   const nav = document.querySelector('.nav__links');

   burger.addEventListener('click',()=> {
    nav.classlist.toggle('nav-active');
  });
}

navSlide();

Answer 1

更改javascript行，classList需要大写L

nav.classList.toggle('nav-active');

而且，您的.nav-active类没有执行任何操作。

例如，更改

.nav-active {
   transform: translateX(0%);
}

to

.nav-active {
  transform: translateX(10%);
}

应用更改后，您应该在单击汉堡时看到该元素左右移动。

---

仅是提示：由于超过50％的Browser来自移动设备，因此您应该使用“移动优先”方法编写CSS。这意味着，如果确实需要使用媒体查询，则应尝试使用min-width。例如：

.burger {
  display: none;
}
@media screen and (max-width:768px){
  .burger {
     display: block;
  }
}

但是

@media screen and (min-width:768px){
  .burger {
     display: none;
  }
}

以便移动版本成为默认版本，因此速度更快。