![](/img/trans.png)
[英]Stuck at this error: Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous>
[英]Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous>
我遇到了问题标题中描述的错误的问题。 当我单击移动菜单的汉堡时,出现以下错误消息: Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.. 这是我的 JS 代码:
window.onload = function(){
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();
}
,... 这是我的 HTML:
<header>
<div class="logo">
<h1 class="logo-text">Title</h1>
</div>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</header>
在 CSS 我有一个 class 称为.nav-active 和一个 class.toggle 当我打开菜单时应该工作。 我在 Joomla 中将此 JS 用作附加文件。
我希望你能帮帮我! 谢谢!
您的 class 不正确
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
但你使用:
<ul class="nav">
所以当
nav.classList.toggle('nav-active');
调用时,未定义“导航”object。
将无序列表更改为:
<ul class="nav-links">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.