Javascript 我能’；我不明白为什么我的汉堡包菜单赢了；行不通

我不明白为什么我的汉堡包菜单不起作用。以下是指向和的链接

let MainNav=document.getElementById（“js菜单”）；
让navBarToggle=document.getElementById（“js navbar切换”）；
addEventListener（“单击”，函数（）{
MainNav.classList.toggle（“活动”）；
});
.header容器{
显示器：flex；
弯曲方向：立柱；
身高：100%；
字体系列：“舞蹈脚本”；
文本对齐：居中；
背景色：#3d3c38；
颜色：#f5f4f2；
网格行开始：1；
网格行端：2；
字体重量：较轻；
}
.标题标题{
字体大小：1.5rem；
自我证明：灵活启动；
自对准：居中；
保证金：0；
填充：0；
}
.标题导航{
自我辩护：中心；
自对准：居中；
字号：2.5em；
边缘顶部：7雷姆；
}
.收割台导航ul{
列表样式：无；
左侧填充：0；
保证金：0；
}
.标题导航a{
文字装饰：无；
颜色：#f5f4f2；
}
.导航栏切换{
显示：无；
}
.主动{
显示：块；
}
.媒体图标{
自我证明：柔性端；
边缘底部：2rem；
页边顶部：自动；
自对准：居中；
}
.媒体图标i{
左边缘：.5rem；
}
.媒体图标{
字号：2em；
保证金：0；
边缘底部：.5rem；
}
.header-name1，
.标题名称2{
保证金：0.5雷姆；
字体大小：正常；
}
.标题图像{
宽度：15雷姆；
身高：12雷姆；
边界：无；
自我证明：灵活启动；
自对准：居中；
边界半径：50%；
页边顶部：1rem；
变换：比例（1,1）；
对象匹配：覆盖；
}
@仅介质屏幕和（最大宽度：900px）{
.场地容器{
网格模板列：1fr；
网格模板区域：“标题容器”“主容器”；
}
.收割台容器{
显示器：flex；
弯曲方向：行；
左侧边缘：.8rem；
保证金权利：.5rem；
证明内容：中心；
对齐项目：居中；
页边顶部：1rem；
背景：白色；
颜色：黑色；
高度：1.5雷姆；
}
.标题图像{
显示：无；
}
.header-name1，
.标题名称2{
显示：无；
}
.收割台容器p{
显示：无；
}
.导航栏切换{
显示：首字母；
右边距：自动；
自对准：居中；
光标：指针；
字体大小：150%；
}
.Navbar_uu切换显示{
显示：块；
}
.标题导航{
页边顶部：1rem；
}
.主导航{
显示器：flex；
弯曲方向：行；
右边距：自动；
显示：无；
}
.媒体图标{
左边距：自动；
字体大小：75%；
自对准：居中；
页边距底部：0；
边际上限：0；
}
}

曼尼·拉莫斯
摄影





manny@email.com
（123）456-7890
请参见 — 简而言之：不。请回答您的问题，并提供一个（这意味着，您的代码必须在问题本身中，因为），以及您想要的结果、您的实际结果，包括所有错误，并演示您的研究和尝试，并解释哪些不起作用。将选择器
.active
替换为
.main nav.active
可能会产生正确的特异性。不过，还有其他问题。请尝试使用您的浏览器，例如Inspector，查看CSS规则是如何应用的。@SebastianSimon我已重新格式化了问题。此外，如果我替换了.active，我将如何更改脚本？此外，代码段中的网格设置可能会被破坏，因此下面是链接。请试试这个css，它可能对你有帮助。main-nav.active{display:block；}请参阅 — 简而言之：不。请回答您的问题，并提供一个（这意味着，您的代码必须在问题本身中，因为），以及您想要的结果、您的实际结果，包括所有错误，并演示您的研究和尝试，并解释哪些不起作用。将选择器
.active
替换为
.main nav.active
可能会产生正确的特异性。不过，还有其他问题。请尝试使用您的浏览器，例如Inspector，查看CSS规则是如何应用的。@SebastianSimon我已重新格式化了问题。此外，如果我替换了.active，我将如何更改脚本？此外，代码段中的网格设置可能会被破坏，因此下面是链接。请试试这个css，它可能对你有帮助。main-nav.active{display:block；}