Javascript 未捕获类型错误：无法读取属性'；类列表'；在HtmlLevel时为空。<；匿名>；

我正面临一个问题，问题标题中描述了一个错误。当我点击burger的移动菜单时，会出现以下错误消息：UncaughtTypeError:无法读取null的属性“classList” 在最高级别。。以下是我的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中，我有一个名为.nav active的类和一个class.toggle，当我打开菜单时，它应该可以工作。我将此JS用作Joomla中的附加文件

---

我希望你能帮助我！谢谢大家!

你的课不正确

const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');

但您使用：

<ul class="nav">

如果调用，则未定义“导航”对象

将无序列表更改为：

<ul class="nav-links">

Typo。你改变了对类名的想法<代码>导航和

导航链接

不同。（HTML还有一个

元素，您可能应该使用它来代替类）。

<ul class="nav-links">