如何通过以下链接或使用纯JavaScript单击外部来关闭菜单

我的目标是当我在菜单外单击或单击链接时关闭菜单。我希望使用纯Javascript实现它。现在我的菜单在我点击图标时打开，我可以在我的导航外点击时关闭它（很好），但我的菜单图标不再工作了，因为它在我的导航元素内。我用

Element.closest（）

和

event.target

（尝试复制jquery解决方案）和

window.addEventListener

尝试了一些不同的场景，但没有成功。有人能查一下我的密码吗

const menuIcon=document.querySelector（“.hamburger menu”）；
const navbar=document.querySelector（“.navbar”）；
menuIcon.addEventListener（“单击”，（）=>{
navbar.classList.toggle（“更改”）
})
addEventListener（'click'，函数（e）{
if（document.querySelector（'.navbar'）。包含（e.target））{
navbar.classList.add（“更改”）
}否则{
navbar.classList.remove（“更改”）
}
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：100%；
高度：100vh；
背景色：#b6b6；
}
.汉堡包菜单{
宽度：35px；
高度：30px；
位置：固定；
顶部：35px；
右：15px；
光标：指针；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.线路{
高度：3倍；
宽度：100%；
背景色：rgb（0,0,0）；
过渡期：全部8秒；
}
.换车。第1行{
变换：旋转（-405deg）平移（-8px，6px）；
}
.换车。第2行{
不透明度：0；
}
.换衣服。第三行{
变换：旋转（405deg）平移（-8px，-6px）；
}
navbar先生{
宽度：210px；
身高：100%；
背景色：rgb（0、128、255）；
位置：固定；
排名：0；
右：-300px；
z指数：1000；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
过渡：右.8s三次贝塞尔（.32,2,55,27）；
}
.改变{
右：0；
}
.导航列表{
列表样式：无；
文本对齐：居中；
}
.导航项目{
利润率：15px；
字体大小：粗体；
}
.导航链路{
字体系列：“Muli Light”，无衬线；
字母间距：1.2px；
文本转换：大写；
文字装饰：无；
颜色：白色；
}









步骤1：向元素添加选项卡索引。这样元素就可以有一个
焦点
状态

<nav id="yourMenu" tabIndex="0">
    // Content
</nav>

步骤3：将
closeMenu（）
函数绑定到菜单项

第4步：确保打开菜单前聚焦菜单。为此，请简单使用
document.getElementById（'yourMenu'）.focus（）


let menu=null；
let button=null；
（功能（）{
menu=document.getElementById（'nav'）；
button=document.getElementById（'openButton'）；
menu.addEventListener（'blur'，（）=>{
menu.classList.add（'hide'）；
});
按钮。addEventListener（'单击'，（）=>{
如果（！menu.classList.contains（'hide'））返回；
menu.classList.remove（'hide'）；
menu.focus（）；
});
})();
。侧栏{
位置：固定；
排名：0；
左：0；
宽度：300px；
高度：100vh；
背景：红色；
光标：指针；
过渡：左1s线性；
颜色：#fff；
}
.侧栏.隐藏{
左：-300px；
}
.打开按钮{
位置：绝对位置；
高度：56px；
排名：0；
右：0；
背景：绿色；
颜色：#fff；
}

单击菜单外的
将其关闭
打开菜单
在我的答案中添加了一个示例。
document.getElementById('yourMenu').addEventListener('blur', () => {
    // Call close function
    closeMenu();
});