[英]Close responsive hamburger menu when clicking outside
Is it possible to close a hamburger menu when clicking outside of it?在汉堡菜单之外单击时是否可以关闭汉堡菜单? It takes too much space.
它占用太多空间。 So far I can close it when clicking the button again, but what if I also want to close it when clicking anywhere else on the page?
到目前为止,我可以在再次单击按钮时关闭它,但是如果我还想在单击页面上的其他任何位置时关闭它,该怎么办? Here's the code for the menu button:
这是菜单按钮的代码:
const links = document.getElementById("links");
hamburger.addEventListener("click", () => {
links.classList.toggle("show");
hambuger.onclick()
});
In the HTML:在 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>
I tried this but no success (doesn't even open here):我试过这个但没有成功(甚至没有在这里打开):
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);
});
I don't know exactly what is the missing code, but this can be done using element.contains()
method:我不确切知道丢失的代码是什么,但这可以使用
element.contains()
方法完成:
function outsideClose(event)) {
if (!menu.contains(event.target) {
close();
}
}
// assuming this is how outsideClose would look like:
function open() {
hamburger.addEventListener("click");
links.classList.toggle("show");
window.addEventListener('mousedown', outsideClose);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.