Javascript 如何单击空白区域退出移动导航

我有一个工作的移动导航菜单。当您单击汉堡图标菜单打开时，但使用这段Javascript代码，您只能在按下右上角的X图标时离开导航菜单。我需要在空旷的地方轻按退出。我怎样才能达到这个目的

/*将侧导航的宽度设置为250px*/
函数openNav（）{
document.getElementById（“mySidenav”）.style.left=“0”；
document.getElementById（“kapatici”）.style.display=“block”；
document.getElementById（“汉堡”）.style.display=“无”；
}
/*将侧边导航的宽度设置为0*/
函数closeNav（）{
document.getElementById（“mySidenav”）.style.left=“-3000px”；
document.getElementById（“kapatici”）.style.display=“无”；
document.getElementById（“汉堡”）.style.display=“块”；
}

。窗体控件无边框{
边界：无；
}
.窗体控件无边框：悬停，.窗体控件无边框：活动，.窗体控件无边框：焦点{
边界：无；
大纲：无；
盒影：无；
}
.卡片{
边框：5px实心#5d5d5c；
}
.底部导航项目.底部导航链接a{
颜色：#fff；
字体大小：10px；
字体大小：粗体；
}
/*侧边导航菜单*/
.侧导航{
高度：100%；/*100%全高*/
宽度：100%；/*0宽度-使用JavaScript更改此值*/
位置：固定；/*保持原位*/
z指数：1050；/*保持在顶部*/
顶部：0；/*保持在顶部*/
左：0；
背景色：#1c1919；/*黑色*/
过渡：0.5s；/*在sidenav中滑动没有过渡效果*/
宽度：75%；
}
/*导航菜单链接*/
.侧导航a{
填充：0；
垫面：4px；
文字装饰：无；
字体大小：14px；
颜色：#ffffff；
显示：块；
字号：600；
过渡：0.3s；
文本转换：大写；
}
/*将鼠标悬停在导航链接上时，请更改其颜色*/
.侧导航a:悬停{
颜色：#f1f1；
}
/*关闭按钮的位置和样式（右上角）*/
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
/*样式页面内容-如果要在打开侧导航时将页面内容向右推，请使用此选项*/
#主要{
过渡：左边距。5s；
填充：20px；
}
/*在高度小于450px的较小屏幕上，更改sidenav的样式（更少的填充和更小的字体大小）*/
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
#卡帕蒂奇{
z指数：1；
字体大小：45px；
光标：指针；
颜色：#fff；
左边距：自动；
右边距：10px；
}

&时代；

现在让我向您解释一下我做了什么：首先，我做了边栏元素宽度的100%。我为菜单项创建了75%的显示宽度和25%的可用空间宽度。单击宽度为25%的区域将关闭侧边栏。为此，您可以检查侧栏html和侧栏css文件。我使用了displayflex

我没有给它们全部以黑色作为背景色，而是在左侧使用黑色，在右侧使用透明

我不得不说。他们的代码需要编辑。你最好再复习一下

/*将侧导航的宽度设置为250px*/
函数openNav（）{
document.getElementById（“mySidenav”）.style.left=“0”；
document.getElementById（“kapatici”）.style.display=“block”；
document.getElementById（“汉堡”）.style.display=“无”；
}
/*将侧边导航的宽度设置为0*/
函数closeNav（）{
document.getElementById（“mySidenav”）.style.left=“-3000px”；
document.getElementById（“kapatici”）.style.display=“无”；
document.getElementById（“汉堡”）.style.display=“块”；
}
document.getElementById（“mySidenav”）.addEventListener（“单击”，函数（e）{
if（如target.classList.contains（“导航权”））{
closeNav（）
}
})

。窗体控件无边框{
边界：无；
}
.窗体控件无边框：悬停，
.窗体控件无边框：活动，
.窗体控件无边框：焦点{
边界：无；
大纲：无；
盒影：无；
}
.卡片{
边框：5px实心#5d5d5c；
}
.底部导航项目.底部导航链接a{
颜色：#fff；
字体大小：10px；
字体大小：粗体；
}
/*侧边导航菜单*/
.侧导航{
显示器：flex；
身高：100%；
/*100%全高*/
宽度：100%；/*0宽度-使用JavaScript更改此值*/
位置：固定；
/*原地不动*/
z指数：11；
/*保持领先*/
排名：0；
/*保持领先*/
左：0；
过渡：0.5s；
/*在sidenav中滑动没有过渡效果*/
宽度：100%；
}
.sidenav.导航左{
宽度：75%；
背景色：#1c1919；
/*黑色的*/
}
.侧导航，右导航{
宽度：25%；
背景色：透明；
}
/*导航菜单链接*/
.侧导航a{
填充：0；
垫面：4px；
文字装饰：无；
字体大小：14px；
颜色：#ffffff；
显示：块；
字号：600；
过渡：0.3s；
文本转换：大写；
}
/*将鼠标悬停在导航链接上时，请更改其颜色*/
.侧导航a:悬停{
颜色：#f1f1；
}
/*关闭按钮的位置和样式（右上角）*/
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
/*样式页面内容-如果要在打开侧导航时将页面内容向右推，请使用此选项*/
#主要{
过渡：左边距0.5s；
填充：20px；
}
/*在较小的屏幕上，高度i