Javascript 通过在菜单外部单击来关闭菜单

我创建了一个移动菜单，点击汉堡按钮即可打开。目前我只能通过点击汉堡按钮来关闭菜单。我需要添加什么才能通过单击页面上的其他位置来关闭菜单

代码如下

为这个基本问题道歉！提前感谢您的帮助

约旦

函数myFunction（）{
var x=document.getElementById（“myLink”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

---

有很多方法，其中之一是在上级元素中使用通用onclick事件。 以下是一个例子：

函数myFunction（）{
var x=document.getElementById（“myLink”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}
window.onclick=myFunction

短途散步
一日游
多日
地图管理器
跟踪搜索和筛选
跟踪警报
关于
菜单
有很多方法，其中之一是在上级元素中使用通用onclick事件。
以下是一个例子：


函数myFunction（）{
var x=document.getElementById（“myLink”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}
window.onclick=myFunction

短途散步
一日游
多日
地图管理器
跟踪搜索和筛选
跟踪警报
关于
菜单
正如前面的答案所说，有很多方法可以解决这个问题。另一种方法是利用和事件。正如前面的评论所说，您可能希望避免污染全局名称空间

下面是一个利用焦点和模糊事件的实现


函数onClick（e）{
if（myLinks.classList.contains（'hidden'））{
myLinks.classList.remove（'hidden'）；
navMenu.focus（）；
}否则{
myLinks.classList.add（'hidden'）；
navMenu.blur（）
}
}
函数onBlur（）{
myLinks.classList.add（'hidden'）；
}
var myLinks=document.getElementById（“myLinks”）；
var navMenu=document.querySelector（'.topnav'）
var myBtn=document.getElementById（'home'）；
myBtn.addEventListener（'click'，onClick）；
navMenu.addEventListener（'blur'，onBlur）
.topnav{
边框：1px蓝色虚线；
}
.sub{
显示：块；
}
.隐藏{
显示：无；
}

NELSON TRAILS
短途散步
一日游
多日
地图管理器
跟踪搜索和筛选
跟踪警报
关于
正如前面的答案所说，有很多方法可以解决这个问题。另一种方法是利用和事件。正如前面的评论所说，您可能希望避免污染全局名称空间

下面是一个利用焦点和模糊事件的实现


函数onClick（e）{
if（myLinks.classList.contains（'hidden'））{
myLinks.classList.remove（'hidden'）；
navMenu.focus（）；
}否则{
myLinks.classList.add（'hidden'）；
navMenu.blur（）
}
}
函数onBlur（）{
myLinks.classList.add（'hidden'）；
}
var myLinks=document.getElementById（“myLinks”）；
var navMenu=document.querySelector（'.topnav'）
var myBtn=document.getElementById（'home'）；
myBtn.addEventListener（'click'，onClick）；
navMenu.addEventListener（'blur'，onBlur）
.topnav{
边框：1px蓝色虚线；
}
.sub{
显示：块；
}
.隐藏{
显示：无；
}

NELSON TRAILS
短途散步
一日游
多日
地图管理器
跟踪搜索和筛选
跟踪警报
关于
这种方法可能不是最好的（在我看来，使用模糊/聚焦的方法更好），但是有很多不同的方法可以做到这一点，所以这里有另一种方法


函数openModal（）{
var x=document.getElementById（'MyLink'）；
如果（x.style.display！=“块”）{
x、 style.display='block'；
addEventListener（'click'，closeMenu，{capture:true}）；
}
}
功能关闭菜单（事件）{
var el=document.getElementById（'MyLink'）；
if（el.style.display='block'&&event.target！=el）{
removeEventListener（'click'，closeMenu，{capture:true}）；
el.style.display='none'；
}
}
div#myLinks{
显示：无；
}

短途散步
一日游
多日
地图管理器
跟踪搜索和筛选
跟踪警报
关于
菜单

这种方法可能不是最好的（在我看来，使用模糊/聚焦的方法更好），但是有很多不同的方法可以做到这一点，所以这里有另一种方法


函数openModal（）{
var x=document.getElementById（'MyLink'）；
如果（x.style.display！=“块”）{
x、 style.display='block'；
addEventListener（'click'，closeMenu，{capture:true}）；
}
}
功能关闭菜单（事件）{
var el=document.getElementById（'MyLink'）；
if（el.style.display='block'&&event.target！=el）{
removeEventListener（'click'，closeMenu，{capture:true}）；
el.style.display='none'；
}
}
div#myLinks{
显示：无；
}

短途散步
一日游
多日
地图管理器
跟踪搜索和筛选
跟踪警报
关于
菜单

您可以使用而不是window@Chipster尝试过了，但至少在代码片段中没有起作用。如果你知道如何让它工作，请随意编辑我的答案。谢谢@NelsonTeixeira，窗口方法可以工作，尽管问题是在窗口中单击会打开菜单，而不仅仅是在单击菜单按钮时。抱歉，我应该包括CSS，因为在您可以使用的代码段中很难看到它，而不是window@Chipster尝试过了，但至少在代码片段中没有起作用。如果你知道如何让它工作，请