我一直在尝试编写响应式导航栏，以使其在较小的设备上变成汉堡菜单。但是javascript代码似乎无法正常工作。我正在按照教程进行操作，说了一切，但是当切换汉堡菜单时，链接不会出现。我将保留一些javascript代码，以便您可以将其检出，看看是否能确定问题所在。NAVBAR SCREENSHOT
如您在屏幕快照中所见，链接不存在。
这里是一些代码：
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.navLinks li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
//Animate Links
navLinks.forEach((link, index) => {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`;
});
}
navSlide();
以及一些CSS代码：
@media screen and (max-width:1112px) {
.nav-links a {
text-decoration: none;
font-family: Poppins;
color: #F5F5F5;
letter-spacing: 3px;
font-weight: bold;
font-size: 80%;
}
img {
width: 90px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
}
@media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 17vh;
background-color: #ff5733;
display: flex;
flex-direction: column;
font-size: 140%;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
HTML：
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada&family=Poppins:wght@100;700;800&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li><a href="">HOME</a></a></li>
<li><a href="">PORTFOLIO</a></a></li>
<li><a href="">SUBMIT</a></a></li>
<li><a href="">CONTACT</a></a></li>
<li><a href="">ABOUT</a></a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<script src="javascript/app.js"></script>
</body>
</html>
如果要在list（
.nav-links li {
opacity: 0;
}