Javascript 关闭菜单而不单击X

附件是我正在使用的代码的链接。我是一个初学者，在阅读其他关于“点击外框时如何关闭菜单”的答案时，我尝试着运用所有我能收集到的逻辑，但我就是无法让它工作。这与我的JS或者我的切换按钮没有onclick事件有关吗？我知道这个问题被问了1000多次，但没有一个解决方案对我有帮助（也许如果我能更好地理解的话，他们会的）

---

您可以将侦听器添加到汉堡包广告覆盖中，然后验证您单击的内容

const navTrigger=document.querySelector（'.nav trigger'）；
const overlay=document.querySelector（'.overlay'）；
navTrigger.addEventListener（'click'，toggleNavigation，false）；
document.body.addEventListener（'click'，toggleNavigation，false）；
航空功能（事件）{
if（event.target==navTrigger | | event.target.parentNode==navTrigger）{
让isOpen=document.body.classList.contains（'nav-open'）；
document.body.classList.toggle（'nav-open'，！isOpen）；
事件。stopImmediatePropagation（）；
}else if（event.target==覆盖）{
if（document.body.classList.contains（'nav-open'））{
document.body.classList.remove（'nav-open'）；
事件。stopImmediatePropagation（）；
}
}
}

正文{
背景色：黑色；
}
.导航触发器{
位置：绝对位置；
z指数：4；
顶部：55px；
左：30px；
高度：44px；
宽度：44px；
溢出：隐藏；
颜色：透明；
空白：nowrap；
文本缩进：100%；
}
.导航触发范围，
.nav触发器范围：：之前，
.nav触发器范围：：之后{
位置：绝对位置；
高度：4px；
宽度：36px；
背景#999999；
}
.导航触发范围{
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
过渡：背景。3s；
}
.nav触发器范围：：之前，
.nav触发器范围：：之后{
内容：''；
排名：0；
左：0；
过渡：背景.3s，转换.3s；
}
.nav触发器范围：：之前{
转换：translateY（-12px）；
}
.nav触发器范围：：之后{
转换：translateY（12px）；
}
.导航触发器：悬停范围，
.nav触发器：悬停范围：：之前，
.nav触发器：悬停范围：：之后{
背景：白色；
}
.导航打开.导航触发范围{
背景：透明；
}
.nav打开。nav触发器范围：：之前，
.nav打开。nav触发器范围：：之后{
背景：1F2B3D；
}
.nav打开.nav触发器：悬停范围：：之前，
.nav打开。nav触发器：悬停范围：：之后{
背景：#D00；
}
.nav打开。nav触发器范围：：之前{
变换：旋转（-45度）；
}
.nav打开。nav触发器范围：：之后{
变换：旋转（45度）；
}
.覆盖{
位置：固定；
z指数：2；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#1C1D21；
不透明度：0；
可见性：隐藏；
转换：不透明度.5s，可见性.5s；
}
.导航打开。覆盖{
不透明度：.6；
能见度：可见；
}
.导航集装箱{
位置：固定；
z指数：3；
排名：0；
左：0；
身高：100%；
宽度：100%；
最大宽度：460像素；
填充物：2米3.5米；
背景:#f3；
溢出：自动；
变换：translateZ（0）；
转化：translateX（-100%）；
变换：变换.5s立方贝塞尔（.07、.23、.34、1）；
文字装饰：无；
}
.导航打开.导航容器{
变换：translateX（0）；
}
.导航集装箱h2{
字体大小：15px；
字体大小：粗体；
字体系列：helvetica neue；
文字装饰：无；
颜色：#AAAAA；
背景色：#0187fa；
保证金：1.5em0；
}
.汉堡包{
列表样式：无；
填充：0；
利润上限：70像素；
}
@介质和屏幕（最小宽度：300px）{
#汉堡a{
字体大小：25px；
}
}
#汉堡a{
显示：块；
填料：1米1米；
字体大小：20px；
字体大小：粗体；
字体系列：helvetica neue；
文字装饰：无；
右边距：30px；
边缘底部：10px；
颜色：#000000；
变换：translateZ（0）；
}
.导航打开，导航a{
动画：滑入。4s。2s向后；
}
.导航打开。导航李：第n种类型（2）a{
动画延迟：.3s；
}
.导航打开。导航李：第n种类型（3）a{
动画延迟：.4s；
}
.导航打开。导航李：第（4）a类的第N个{
动画延迟：.5s；
}
.导航打开。导航李：第n个（5）a型{
动画延迟：.6s；
}
@关键帧滑入{
0% {
不透明度：0；
转换：translateX（80px）；
}
100% {
不透明度：1；
变换：translateX（0）；
}
}

这应该有帮助：）

var overlay=document.querySelector（'.overlay'）；overlay.addEventListener（“单击”，切换导航）看看这个哇@GrzegorzT。太好了，谢谢你！
var navTrigger = document.getElementsByClassName('nav-trigger')[0],
              body = document.getElementsByTagName('body')[0];

          navTrigger.addEventListener('click', toggleNavigation);

          function toggleNavigation(event) {
           event.preventDefault();
           body.classList.toggle('nav-open');
          }