Javascript 属性TransformX（0%）未应用于无序列表

我正在创建一个移动导航栏，当我点击菜单按钮时，它会淡入淡出（当我接触到大约800px时，这个按钮会出现）。默认情况下，菜单有一个

transform:translateX（100%）

当我单击按钮时，它应用类和样式

.nav active{transform:translateX（0）；}

，菜单应该出现在屏幕上，但是样式没有被识别

这是到目前为止我的代码

const导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'.nav links'）；
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'nav-active'）；
});
}
导航幻灯片（）
@导入url（'https://fonts.googleapis.com/css2?family=PT+衬线：意大利，wght@0，400；0700；1400；1700&display=swap'）；
/*字体系列：“PT Serif”，Serif*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
：根{
--主字体：“PT衬线”，衬线；
--木炭：264653ff；
--波斯绿：2a9d8fff；
--橙黄色克拉约拉：#e9c46aff；
--沙棕色#f4a261ff；
--烧焦的锡耶纳：#e76f51ff；
--哥伦比亚蓝：c8ecfaff；
}
标题{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
字体系列：var（--mainFont）；
背景色：var（--橙黄色克拉约拉）；
/*背景颜色：var（--热浪）*/
填充：12px；
}
标题#标题部门#公司标志{
宽度：30%；
/*左边距：5px*/
}
标题#标题部门#公司标志img{
宽度：60%；
}
导航栏{
左边距：22px；
显示器：flex；
宽度：70%；
}
.导航链接{
显示器：flex；
/*背景色：var（--卡罗莱纳蓝）*/
证明内容：周围的空间；
宽度：100%；
对齐项目：柔性端；
左边缘：44%；
填充：12px；
}
.nav链接a{
颜色：var（--爱丽丝蓝）；
文字装饰：无；
字母间距：4px；
字体大小：1.5vmax；
字体系列：var（--mainFont）；
右边距：3倍；
颜色：白色；
证明内容：周围的空间；
/*右边距：55px*/
}
.nav链接李{
列表样式类型：无；
}
.导航链接a：悬停{
底部边框：3倍纯白；
边框顶部：3件纯白；
垫底：3件；
}
.汉堡{
显示：无；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：白色；
保证金：5px；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航链接{
显示器：flex；
/*背景色：var（--卡罗莱纳蓝）*/
证明内容：周围的空间；
宽度：100%；
对齐项目：柔性端；
左边缘：44%；
填充：12px；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
导航栏。导航链接{
/*dis：无*/
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
宽度：100%；
背景色：var（--橙黄色克拉约拉）；
显示：柔性；柔性方向：列；
对齐项目：居中；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
导航#导航栏。导航链接li{
不透明度：0；
}
身体{
溢出x：隐藏；
}
标题#标题部门#公司标志{
z指数：1；
/*左边距：5px*/
}
.汉堡{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.汉堡部{
显示器：flex；
自对准：柔性端；
间隙：-10px；
}
第2部分，第3部分{
边缘顶部：.6px；
}
.导航激活{
变换：translateX（0）；
}
}






确保将其添加到身体标签的底部。不要使用切换。改用nav.className=“nav active”，或者您也可以使用nav.classList=“nav active”。
阅读CSS特性：

还要学习使用浏览器内置的开发人员工具。它将根据特定性显示应用和未应用的样式

选择器
nav#nav bar.nav links
比选择器
.nav active
具有更高的特异性，因此其样式将以更高的优先级应用

为了避免这种情况，当您有一个类应该重写另一个规则时，请确保重写规则具有相同的选择器和修饰符。在这种情况下，将是
nav#nav bar.nav links.nav active

还有一个提示：不要过度指定选择器。也不要使用ID应用样式。ID具有最高的特异性，因此更难覆盖它们。在您的情况下，不使用
nav#nav bar.nav links
，只使用
.nav links
就足够了，然后激活的选择器将是
.nav links.nav active