Javascript 单击X关闭菜单

我正在努力让X删除菜单的活动状态类，并将其返回到“隐藏”状态。我在JS中哪里出错了？ 单击菜单按钮时，菜单会出现，但单击X时，不会发生任何事情。如何将其返回到0%宽度的隐藏状态

JS是我感到困惑的地方。我需要使用不同的方法吗？或者我需要一个if语句来确定何时应用活动类

const menuarive=（）=>{
const menuButton=document.querySelector（'.menu btn'）；
const menu=document.querySelector（'.menu'）；
const cross=document.querySelector（'.cross'）；
const menuActive=document.querySelector（'.menuActive'）；
菜单按钮。addEventListener（'单击'，（）=>{
menu.classList.add（'menuactive'）；
});
cross.addEventListener（'单击'，（）=>{
menuActive.classList.remove（'menuActive'）；
});
}
menuarive（）
*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
高度：100vh；
溢出x：隐藏；
保证金：0；
字体系列：“Lustria”，无衬线；
显示：网格；
网格模板列：50%50%；
网格模板行：10%45%45%；
网格模板区域：
“标题部分”
“主要部分”
“主页脚”；
}
/*标题*/
标题{
显示器：flex；
弯曲方向：行；
对正内容：空间均匀；
对齐项目：居中；
网格区域：标题；
背景#FDBC58；
填充：6px；
}
P
.酒吧，
.fa facebook，
.fa instagram{
保证金：0；
}
氢{
填充：0；
保证金：0；
左边距：8px；
}
p{
字体大小：14px；
}
.fa facebook，
.fa instagram{
字体大小：14px；
颜色：黑色；
}
a{
文字装饰：无；
颜色：黑色；
}
.汉堡{
光标：指针；
}
.汉堡部{
背景色：rgb（0,0,0）；
宽度：20px；
高度：2倍；
保证金：5px；
过渡：所有0.5s缓解；
}
/*左侧部分*/
主要{
网格区域：主；
位置：相对位置；
}
主img{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
.菜单btn{
z指数：4；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：50%；
高度：50px；
边框：白色实心5px；
背景：rgba（0,0,0,0.1）；
颜色：白色；
字体大小：20px；
边界半径：5px；
光标：指针；
}
.菜单{
身高：60%；
/*100%全高*/
宽度：0；
/*0宽度-使用JavaScript更改此宽度*/
位置：绝对位置；
/*原地不动*/
z指数：6；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
背景色：#FDBC58；
盒影：0 5px 10px rgba（0,0,0,0.2）；
/*黑色的*/
溢出x：隐藏；
/*禁用水平滚动*/
填充顶部：20px；
/*将内容从顶部放置60像素*/
过渡：0.5s缓进；
/*在sidenav中滑动的0.5秒过渡效果*/
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
证明内容：中心；
}
.textcontain{
边缘底部：50px；
}
.text包含h4{
字体大小：20px；
利润率：10px0；
}
.textp{
保证金：5px0；
}
.十字架{
显示：块；
宽度：100%；
文本对齐：右对齐；
位置：绝对位置；
最高：2%；
右：3%；
光标：指针；
}
/*单击菜单按钮时*/
menuactive先生{
身高：60%；
宽度：40%；
位置：绝对位置；
z指数：6；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
背景色：#FDBC58；
盒影：0 5px 10px rgba（0,0,0,0.2）；
溢出x：隐藏；
填充顶部：20px；
过渡：0.5s缓进；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
证明内容：中心；
}
.菜单隐藏{
显示：无；
}
/*滑入链接*/
.侧导航{
身高：95%；
宽度：0；
位置：固定；
z指数：1；
底部：0；
左：0；
背景色：#FDBC58；
溢出x：隐藏；
填充顶部：20px；
过渡：0.5s；
}
/*导航菜单链接*/
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#000；
显示器：flex；
弯曲方向：立柱；
过渡：0.3s；
}
.侧导航激活{
身高：90%；
宽度：13%；
位置：固定；
z指数：8；
底部：0；
左：0；
背景色：#FDBC58；
溢出x：隐藏；
填充顶部：20px；
过渡：0.5s；
}
/*右上角区域*/
部分{
网格区域：截面；
}
第img节{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
/*右下角区域*/
页脚{
网格区域：页脚；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
img{
高度：250px；
宽度：230px；
对象匹配：包含；
}
#旗{
高度：20px；
宽度：30px；
利润底部：4倍；
}
/*敏感的*/
@仅介质屏幕和（最大宽度：996px）{
身体{
高度：100vh；
保证金：0；
显示：网格；
网格模板列：100%；
网格模板行：重复（自动，4）；
网格模板区域：
“标题”
“主要”
“节”
menu.classList.remove('menuactive');

menuActive.classList.remove('menuactive');

menu.classList.remove('menuactive');