我对 JS 还很陌生，所以如果这个问题得到解答，我很抱歉。
我已经浏览了大多数答案，但它们与我的答案并不完全一致。
我不明白为什么元素存在时无法被调用。
我认为这似乎与 CSS 无关，但我并不完全确定。
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide(); display: flex;
justify-content:space-around;
align-items: center;
min-height: 8vh;
background-color: var(--mainBg);
}
.nav-links li{
list-style: none;
}
.nav-links{
display: flex;
justify-content: space-evenly;
width: 20%;
font-size: 20px;
}
.nav-links a{
letter-spacing: 2px;
color:var(--mainText);
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: var(--mainText);
margin:3px;
padding: 0;
}
.showacase-hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("img/D1.jpg");
height: 600px;
background-position:center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-container{
text-align: center;
position: absolute;
top: 50%;
left: 28%;
color: var(--mainBanner);
font-size: 20px;
}
/* Media Queries*/
@media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
@media screen and (max-width:728px){
body{
overflow-x: hidden;
}
.nav-links{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color:var(--mainBg);
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;
margin-left: 28em;
}
.nav-active{
transform: translateX(0%);
}
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
@media screen and(max-width:566px){
}<body>
<nav>
<ul class="nav-links">
<li><a href="index.html ">Home</a></li>
<li><a href="about.html ">About</a></li>
<li><a href="services.html ">Services</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>
<div class="showacase-hero">
<div class="hero-container">
<h1>Yade's Pet</h1>
<span class="banner"><p>Petcare Specialist/Dog Walker</p></span>
<form action="https://www.w3docs.com/">
<button class="btn" type="submit">Let's Take a Stroll</button>
</form>
</div>
</div>
<script type="text/javascript" src="app2.js"></script>
</body>
</html>
最佳答案
nav-links 是一个类，而不是标签，因此在类名前添加一个点:
document.querySelector( '.nav-links' );
PS:使用变量 const navSlide = () => { 而不是清晰的函数声明是一种不好的做法:
function navSlide () {
...
}
关于javascript - 当元素存在时，“classList”属性返回 null？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64409327/