Javascript JS navslide函数在单击时不起作用

我不是一个很好的程序员，但是这段代码已经为很多人使用过了，我花了很多时间试图找到我的错误。当我点击汉堡包菜单时，右边的幻灯片菜单应该会滑入视图，并将按钮从不透明度0变为不透明度1。所有这些都没有发生，这让我觉得我有一个js错误

任何帮助都会很好

在下面的中间

const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（“.nav links”）
burger.addEventListener（'click'，（）=>{
nav.classlist.toggle（'nav-active'）；
});
}
导航幻灯片（）
@charset“UTF-8”；
/*CSS文档*/
@导入url（'https://fonts.googleapis.com/css?family=Raleway:100，200400600700900&display=swap'）；
* {
保证金：0；
填充：0；
框大小：边框框；
}
.标题{
高度：2.5em；
背景色：#7BC58A；
位置：粘性；
排名：0；
颜色：#FFFFFF；
字体系列：“Raleway”，无衬线；
字体大小：.8rem；
文本对齐：左对齐；
左：6em；
填料顶部：.4em；
}
.标志图像{
宽度：50px；
高度：50px；
溢出：隐藏；
边距：0.0em；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：45%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
颜色：#5A5A；
字体大小：.75em；
文本转换：大写；
文字装饰：无；
字体系列：“Raleway”，无衬线；
字号：600；
}
.导航链接a：悬停{
颜色：#7BC58A；
}
.nav链路a：激活{
颜色：#d1d1；
}
.汉堡{
显示：无；
浮动：对；
位置：相对位置；
顶部：0px；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：#5A5A；
保证金：3倍；
边界半径：40px；
光标：指针；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航链接{
宽度：55%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：#7BC58A；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：翻译（100%）；
}
.nav链接李{
不透明度：1；
}
.汉堡{
显示：块；
}
}
.导航激活{
转换：translatex（100%）
}
@关键帧navLinksFade{
从{
不透明度：0；
转换：translateX（50px）；
}
到{
不透明度：1；
转换：translateX（0px）；
}
}

无标题文件
(209)838-1934  inquiry@allseasonlawn.net








添加类时遇到两个问题。首先，您试图在浏览器解析（读取）完整html之前附加事件侦听器。换句话说，浏览器不知道“汉堡”或“导航”指的是什么。要克服这一问题，需要将脚本作为onload方法的一部分运行。注意，在JSFIDLE中，您必须将Load类型设置为“no wrap bottom of”，才能访问它，我认为代码段不支持此功能

第二个错误是“classList”拼写错误（“L”大写）。我相信你仍然有一些工作要做，让它工作，但这让脚本运行

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')

burger.addEventListener('click', ()=>{
    nav.classList.toggle('nav-active');
});
}

onload = ()=>{
    navSlide();
};

请参阅此，