为什么我的导航汉堡在我点击它时没有显示该块？

Question

过去几天我一直在努力解决这个问题，这太令人沮丧了。我不明白为什么我的汉堡在点击时什么都不显示。汉堡的动画确实有效。我知道有很多代码，但有人能帮我解决这个问题吗？

当你点击汉堡(移动导航栏(时，带有导航链接的块不会显示。我已经写了几次代码，但我仍然没有发现问题。。

<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="gym.html">Gym's</a></li>
</ul>
<div class="nav-logo">
<img src="img/logo-white.png">        
</div>
<ul class="nav-links">
<li><a href="nieuw.html">Nieuw?</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
nav {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.2);
min-height: 8vh;
position: absolute;
z-index: 20;
width: 100%;
}
nav .nav-logo {
transform: scale(0.5);
}
.nav-links {
display: flex;
margin: 0px 20px;
}
.nav-links li {
margin: 0px 5vh;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
}
.nav-links li:hover {
cursor: pointer;
color: var(--orange-color);
font-weight: bold;
transition: 0.5s;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: var(--white-color);
margin: 5px;
transition: all 0.3s ease;
z-index: 11;
border-radius: 5px;
}
.nav-active {
transform: translateX(0%)
}
.current {
font-weight: 600;
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
@keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
@media screen and (max-width: 768px) {
.nav-links {
position: absolute;
right: -30px;
height: 92vh;
top: 8vh;
background-color: var(--black-color);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
z-index: 5;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
<script>
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');

burger.addEventListener('click', () => {
// Toggle Nav
nav.classList.toggle('nav-active');

// Animate Links
navLinks.forEach((link, index) => {
if(link.style.animation){
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
// Burger animation
burger.classList.toggle('toggle');
});
}

navSlide();
</script>

Answer 1

您的代码可以工作，但块显示在浏览器窗口之外。

尝试从类中删除"；导航链路"；以下声明：

transform: translateX(100%);

然后你会看到你的街区。