我正在做一个项目，并使用代码来帮助我了解如何构建一个导航栏。我正在使用这个教程:https://www.youtube.com/watch?v=gXkqy0b4M5g我在视频中没有超过22:05。
我已经建立了HTML, CSS和第一个JavaScript函数，应该是显示导航条，当你点击汉堡包菜单，我们已经建立了div的。我已经在JavaScript中构建了该函数，我没有收到任何错误，并且所有内容都将视频匹配为"T"并且看起来100%正确，但由于某种原因，当我点击汉堡包菜单时，它不会运行该功能。
console.log("Hello!");
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();nav .nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #366576;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
nav .nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
<a href="#header">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>我已经看了24个多小时了，我怎么也找不到任何问题。一切都是联系在一起的，我没有看到任何错误。它的工作原理和我在视频中看到的一模一样。有人知道这是怎么回事吗?
您可以使用媒体查询和屏幕大小。
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
if (link.style.animation){
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #504954;
font-family: 'Popins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
.nav-links {
width: 60%;
}
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #504954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px)
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,6px)
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
<a href="#header">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>似乎没有定义类别line1,line2和line3，并且"汉堡包";不占用屏幕空间供您单击。我使.burger可见:
<div class="burger">
<div class="line1">---</div>
<div class="line2">...</div>
<div class="line3">---</div>
</div>
并添加了一些日志记录:
burger.addEventListener('click', () => {
console.log(nav.classList[1]);
nav.classList.toggle('nav-active');
console.log(nav.classList[1]);
});
如果你点击"汉堡包"重复，控制台每次应交替显示undefined和nav-active。