我的网站上有一个移动菜单,当按下按钮时会显示该菜单。当我使用以下代码按此按钮时,显示和隐藏菜单的效果非常好:
但是,当我单击菜单中的链接时,我也想隐藏菜单。我该如何做到这一点?
var coll = document.getElementsByClassName("hamburger");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var mobilemenuspace = this.nextElementSibling;
if (mobilemenuspace.style.display === "block") {
mobilemenuspace.style.display = "none";
} else {
mobilemenuspace.style.display = "block";
}
});
}
答案 0 :(得分:0)
您可以在每个链接上添加一个eventLister,然后调用:
function onLinkClick() {
var coll = document.getElementsByClassName("hamburger");
coll.classList.remove("active");
}
答案 1 :(得分:0)
将事件侦听器添加到每个链接。该代码可能类似于以下内容。
请注意,对我来说,下面的代码很繁琐,在不清楚或不安全的地方,这很好,这是一个好的开始。 jQuery可以使事情变得更好一些,但是在React或Vue中会更整洁。
const toggleMenu = () => {
const menu = document.getElementsByClassName("the-list")[0];
if (typeof menu === "undefined" || typeof menu === "null") {
throw new Error("menu element not found");
};
const isHidden = menu.classList.contains("hidden");
if (isHidden) {
menu.classList.remove("hidden");
} else {
menu.classList.add("hidden");
};
};
const button = document.getElementById("the-button");
button.addEventListener("click", toggleMenu);
const links = document.getElementsByClassName("a-link");
for (link of links) {
link.addEventListener("click", toggleMenu);
};
.hidden {
display: none;
}
<ul class="the-list hidden">
<li class="a-link"><a href="#">link 1</a></li>
<li class="a-link"><a href="#">link 2</a></li>
</ul>
<button id="the-button">toggle menu</button>