如何在vanilla JavaScript中切换多个类？

我似乎在画布外导航方面遇到了一些问题。 我试图在一个事件侦听器上切换两个类，它使用nav菜单，但它没有在.Site元素上切换类。我做错了什么

我正试图让.Site元素添加一个类，将

左边距设置为
20%
，并将
宽度设置为
80%
，而非画布菜单则从
0
获取
宽度
的
20%
。导航正常，但
.Site
切换不起作用


let navToggle=document.querySelector（'.menuButton'）；
让nav=document.querySelector（'.SiteNavigation'）；
让site=document.querySelector（'.site'）；
navToggle.addEventListener（'单击'，（事件）=>{
切换（“SiteNavigationOpen”）；
site.classList.toggle（“SiteNavOpen”）；
});
@使用postsss嵌套；
@使用简单变量；
html{
背景：#fff；
滚动行为：平滑；
线高：1.15；
-webkit字体平滑：亚像素抗锯齿；
-webkit溢出滚动：触摸；
-webkit文本大小调整：100%；
文本阴影：无；
文本呈现：优化易读性；
-webkit字体变体连字：普通连字；
字体变体连字：常用连字；
-moz osx字体平滑：灰度；
-webkit字体功能设置：“kern”；
字体功能设置：“kern”；
-webkit字体紧排：正常；
字体紧排：正常；
字体大小：calc（16px+（40-16）*（（100vw-320px）/（7680-320））；
}
html，
身体{
字体系列：“Lato”，无衬线；
}
h1，
h2，
h3，
h4，
h5，
h6{
字号：700；
线高：1.1；
保证金底部：1.1rem；
}
h1{
字号：2.25rem
}
氢{
字号：2rem；
}
h3{
字号：1.75em
}
h4{
字体大小：1.5rem
}
h5{
字号：1.25rem
}
h6{
字号：1rem；
}
p{
线高：1.5；
字号：1rem；
保证金底部：1.1rem；
字体大小：300；
}
p、 --鼠标印{
字体大小：0.8rem；
}
.文本中心{
文本对齐：居中；
}
.地点{
宽度：100%；
左边距：0；
}
.SiteNavOpen{
宽度：80%；
左缘：20%；
}
menuButton先生{
位置：绝对位置；
顶部：1vh；
右：1vw；
边界：无；
背景：无；
颜色：#eaeaea；
}
.SiteHeader{
最小高度：100vh；
背景：url（'https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=格式和配合=裁剪&w=1350&q=80'）中心；
背景尺寸：封面；
背景附件：固定；
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#eaeaea；
过滤器：乌贼墨（40%）；
}
.网站品牌{
显示器：flex；
弯曲方向：立柱；
}
.sitea{
颜色：#eaeaea；
}
.SiteMain{
背景：#eaeaea；
颜色：#3535；
左：5vw；
右：5vw；
垫顶：5vh；
垫底：5vh；
}
梅因内尔先生{
@介质（最小宽度：1280px）{
最大宽度：66vw；
保证金：0自动；
}
}
articleMain先生{
最大宽度：33em；
保证金：0自动；
}
.--文本中心{
文本对齐：居中；
}
.网站导航{
背景：#66023c；
颜色：#eaeaea；
高度：100vh；
宽度：0；
位置：固定；
排名：0；
左：0；
z指数：1；
溢出x：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：均为0.13s；
}
.SiteNavigationPen{
宽度：20%；
}
.SiteNavigation a{
颜色：#eaeaea；
}
李先生{
过渡：均为0.13s；
}
.SiteNavigation li:悬停{
变换：比例（1.2,1.2）；
}
.地点{
宽度：100%；
左边缘：0%；
过渡：均为0.13s；
}
1.现场树脂{
背景：#66023c；
颜色：#eaeaea；
左：5vw；
右：5vw；
垫顶：5vh；
垫底：5vh；
}
.树脂内部{
@介质（最小宽度：1280px）{
最大宽度：66vw；
保证金：0自动；
}
}
.SiteFooter{
背景：#66023c；
颜色：#eaeaea；
左：5vw；
右：5vw；
垫顶：5vh；
垫底：5vh；
}
.footerInner{
@介质（最小宽度：1280px）{
最大宽度：66vw；
保证金：0自动；
}
}
.社会媒体{
文本对齐：居中；
}
.fab:悬停{
变换：比例（1.2,1.2）；
}
.--btnLink{
背景：无；
颜色：无；
边界：无；
}
.社会媒体{
过渡：均为0.13s；
}
.socialMediaButton:悬停{
变换：比例（1.5,1.5）；
}








特奥蒂瓦坎设计
优质网站服务商
尼尔茨！（意思是你好！）
我的同僚们都是精英。用赞美之词来形容分子，用真理来形容动物，用液体来形容清晰！腐败是一种道德败坏

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。事实上，法定代表人代表法定代表人的最高权利，而不是法定代表人的最高权利！临时性的，临时的，
伊普萨姆·库斯·阿尼米减去埃塞·尼希尔！脸上的暂时性权属，是指脸上的白斑或白斑，是指脸上的白斑或白斑的特征？暂时性胎动
大家庭，大家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小家庭，小？莫莱斯蒂亚，你是否有权利去做一件事？为明确责任而提出的诉讼，
我们的工作应该是临时性的，因为这是一个建筑设计师的错误！Accusantium eos velit必须是一种解决方案，它是对时间的一种否定
流动资金

洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。伊普萨姆·多洛雷斯·尼西实验室
.SiteNavOpen {
    width: 80% !important;
    margin-left: 20% !important;
}
//OR
.Site .SiteNavOpen {
    width: 80%;
    margin-left: 20%;
}