汉堡导航栏激活时出现问题

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%);
}

爪哇脚本

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%);
}

自

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

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

---

只是一个提示：由于超过50%的浏览器来自移动设备，您应该使用"移动优先"方法编写css。这意味着，如果您确实必须使用媒体查询，则应尝试使用min-width。例如：

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

但

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

使移动版本成为默认版本，因此更快。