Javascript 单击关闭移动导航切换

我有一个带有汉堡开关的移动导航菜单，点击后可以成功打开菜单。我还在单击切换按钮时添加动画。我正在使用背景来关闭导航菜单，但我还希望能够在单击切换时关闭菜单，如果单击背景，则在菜单关闭时切换动画。以下是我目前的代码，如有任何帮助，将不胜感激

var background=document.querySelector（“.background”）；
var toggleButton=document.querySelector（“.togglecontainer”）；
var mobileNav=document.querySelector（“.mobile nav”）；
background.addEventListener（“单击”，函数（）{
mobileNav.classList.remove（“打开”）；
关闭菜单（）；
});
函数关闭菜单（）{
如果（切换按钮）{
mobileNav.classList.remove（“打开”）；
}
background.classList.remove（“打开”）；
toggleButton.classList.remove（“活动”）；
}
toggleButton.addEventListener（“单击”，函数（）{
mobileNav.classList.add（“打开”）；
toggleButton.classList.add（“活动”）；
background.classList.add（“打开”）；
});
函数toggleNav（x）{
x、 切换（“更改”）；
}

.background{
位置：固定；
显示：无；
顶部：197px；
左：0；
z指数：100；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.5）；
}
.切换容器{
显示：内联块；
光标：指针；
利润率：10px；
z指数：105；
}
.bar1，
.bar2，
.bar3{
宽度：2em；
高度：5px；
背景色：黑色；
利润率：6px0；
过渡：0.4s；
}
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
.找零{
不透明度：0；
}
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
.移动导航{
显示：无；
位置：固定；
z指数：101；
顶部：60px；
左：0；
背景：白色；
宽度：30%；
高度：100vh；
}
.移动导航项目{
宽度：90%；
身高：100%；
列表样式：无；
利润率：10%自动；
填充：0；
字体系列：“Quantico”，无衬线；
}
.移动导航项目{
保证金：1rem 0；
}
.mobile-nav____项目a{
字体大小：1.5rem；
文字装饰：无！重要；
颜色：#15396c；
}
@介质（最小宽度：60rem）{
.切换容器{
显示：无；
}
}
.打开{
显示：块！重要；
}

我已经清理了JS，并做了一些更改以使其正常工作。也就是说，我将内联的

onClick

移动到事件监听器，并合并了一些其他函数以使其更易于理解（但如果需要，可以将它们分开）

主要更改是在打开时将

活动

和

更改

类添加到

切换按钮

，然后在单击背景时删除

活动

和

更改

类

var background=document.querySelector（“.background”）；
var toggleButton=document.querySelector（“.togglecontainer”）；
var mobileNav=document.querySelector（“.mobile nav”）；
background.addEventListener（“单击”，函数（）{
mobileNav.classList.remove（“打开”）；
background.classList.remove（“打开”）；
toggleButton.classList.remove（“active”，“change”）；
});
toggleButton.addEventListener（“单击”，函数（）{
mobileNav.classList.add（“打开”）；
toggleButton.classList.add（“active”，“change”）；
background.classList.add（“打开”）；
});
.background{
位置：固定；
显示：无；
左：0；
z指数：100；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.5）；
}
.切换容器{
显示：内联块；
光标：指针；
利润率：10px；
z指数：105；
}
.bar1，
.bar2，
.bar3{
宽度：2em；
高度：5px；
背景色：黑色；
利润率：6px0；
过渡：0.4s；
}
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
}
.找零{
不透明度：0；
}
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
}
.移动导航{
显示：无；
位置：固定；
z指数：101；
顶部：60px；
左：0；
背景：白色；
宽度：30%；
高度：100vh；
}
.移动导航项目{
宽度：90%；
身高：100%；
列表样式：无；
利润率：10%自动；
填充：0；
字体系列：“Quantico”，无衬线；
}
.移动导航项目{
保证金：1rem 0；
}
.mobile-nav____项目a{
字体大小：1.5rem；
文字装饰：无！重要；
颜色：#15396c；
}
@介质（最小宽度：60rem）{
.切换容器{
显示：无；
}
}
.打开{
显示：块！重要；
}













欢迎迈克！我已尝试运行您的代码，但它似乎无法正常工作。我已经更新了问题，将其转化为一个工作示例，但似乎我们缺少了一些样式/元素/等等。你能编辑问题使其工作吗，以便我们能提供帮助？谢谢Brett！我添加了一些缺少的css。背景元素在哪里？你可以创建一个片段来添加必要的HTML、css和JS，这样我们就可以看到结果-很抱歉，我以为我忘了什么，我将背景元素添加到了HTMLMany谢谢你的帮助！很抱歉好奇的cssOut的格式问题，如果我想移除背景，我怎么能在打开菜单后单击切换按钮来关闭菜单？您需要检查菜单是否为o