如何让这个JavaScript汉堡菜单工作？

我正在网上学习一个教程，试图让我的导航栏稍微有点爵士乐，但我的汉堡菜单和动画都无法正常工作

我已将JS文件链接到上面的

（还尝试将其移动到

）

这可能与它被保存的方式有关，还是我犯了一个非常明显的错误

const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'.nav links'）；
const navLinks=document.queryselectoral（'.nav links li'）；
//切换导航//
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'nav-active'）；
});
}
导航幻灯片（）
.nav链接{
显示器：flex；
证明内容：周围的空间；
宽度：40%；
}
.导航链接a{
文字装饰：无；
颜色：白色；
字体大小：粗体；
字体大小：14px；
}
.nav链接李{
列表样式：无；
}
.汉堡{
显示：无；
光标：指针；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：白色；
保证金：5px；
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：#006a71；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：30%；
转化：translateX（100%）；
过渡：0.5s缓进；
}
.nav链接李{
不透明度：0；
}
.汉堡{
显示：块；
}
}
.导航激活{
转化：translateX（0%）！重要；
}






很明显，您将汉堡菜单行添加到白色背景中，因此它不会显示出来

把颜色改成黑色

.burger div {
    background-color: black;
}

和改变不透明度

.nav-links.nav-active li{
  opacity: 1;
}

并更改的颜色（因为在桌面视图中没有显示任何内容）


const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'.nav links'）；
const navLinks=document.queryselectoral（'.nav links li'）；
//切换导航//
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'nav-active'）；
});
}
导航幻灯片（）
.nav链接{
显示器：flex；
证明内容：周围的空间；
宽度：40%；
}
.导航链接a{
文字装饰：无；
颜色：#111；
字体大小：粗体；
字体大小：14px；
}
.nav链接李{
列表样式：无；
}
.汉堡{
显示：无；
光标：指针；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：黑色；
保证金：5px；
}
.nav-links.nav-active li{
不透明度：1；
}
@仅介质屏幕和（最大宽度：768px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：#006a71；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：30%；
转化：translateX（100%）；
过渡：0.5s缓进；
}
.nav链接李{
不透明度：0；
}
.汉堡{
显示：块；
}
}
.导航激活{
转化：translateX（0%）！重要；
}
.导航链接a{
文字装饰：无；
颜色：黑色；
字体大小：粗体；
字体大小：14px；
}






问题出在哪里？是缺少
.nav-links.nav-active li{opacity:1；}
规则吗？抱歉，不清楚，动画不起作用。当缩放到移动时，汉堡会显示在屏幕上，但单击菜单时菜单不会出现。谢谢，我已成功检测到问题。基本上JS文件不需要被函数包围。我简化了它，使变量和切换函数分离。对于不透明度问题，我改变了z索引，使其显示在其他元素的前面
.nav-links a {
  color: #111;
}