Javascript 单击外部时关闭响应汉堡菜单

在汉堡菜单外单击时是否可以关闭汉堡菜单？它占用了太多的空间。到目前为止，我可以在再次单击按钮时将其关闭，但如果我还想在单击页面上的其他任何位置时将其关闭，该怎么办？以下是菜单按钮的代码：

const links = document.getElementById("links");

hamburger.addEventListener("click", () => {
    links.classList.toggle("show");
    hambuger.onclick()
});

在HTML中：

            <img id="IPtokiLOGOBlack" src="styles/images/IPtokiLOGOBlack.svg" />
            <button class="hamburger" id="hamburger">
                <i class="fa fa-bars"></i>
            </button>
            <div class="active" id="links">
                <a href="#home"><?=$menuHome ?></a>
                <a href="#about"><?=$menuAbout ?></a>
                <a href="#projects"><?=$menuProjects ?></a>
                <a href="#team"><?=$menuTeam ?></a>
                <a href="#contact"><?=$menuContact ?></a>
                <a href="#jobs"><?=$menuJobs ?></a>
                <?=$menuLanguage ()?>
            </div>
        </div>

---

我不知道缺少的代码是什么，但可以使用

元素。contains（）

方法：

功能外部关闭（事件））{
如果（！menu.contains）（event.target）{
close（）；
}
}
//假设这是outsideClose的外观：
函数open（）{
汉堡包。添加列表（“点击”）；
links.classList.toggle（“显示”）；
window.addEventListener（'mousedown'，outsideClose）；
}

我不知道丢失的代码是什么，但可以使用

元素。contains（）

方法：

功能外部关闭（事件））{
如果（！menu.contains）（event.target）{
close（）；
}
}
//假设这是outsideClose的外观：
函数open（）{
汉堡包。添加列表（“点击”）；
links.classList.toggle（“显示”）；
window.addEventListener（'mousedown'，outsideClose）；
}

这是否回答了您的问题？这是否回答了您的问题？

document.querySelectorAll(".hamburger").forEach((trigger) => {
    const menu = document.querySelector(trigger.dataset.menu);
    const hamburger = document.getElementById("hamburger");
    const links = document.getElementById("links");

    function open() {
        hamburger.addEventListener("click");
        links.classList.toggle("show");
    }

    function close() {
        menu.classList.remove("show");
        menu.removeEventListener("click", outsideClose);
    }

    function outsideClose(event) {
        if (event.target !== menu) {
            close();
        }
    }
    trigger.addEventListener("click", open);
});