[英]How to close navbar menu when click on a menu option
This is the navbar html code:这是导航栏 html 代码:
<nav id="navbar">
<ul class="menu">
<li class="logo"><a href="#"><img src="img/LOGO JS BLANCO PNG.png"></a></li>
<li class="item"><a href="#home">Home</a></li>
<li class="item"><a href="#about">About</a></li>
<li class="item"><a href="#portfolio">Portfolio</a></li>
<li class="item"><a href="#knowledge">Knowledge</a></li>
<li class="item"><a href="#experience">Experience</a></li>
<li class="item"><a href="#contact">Contact</a></li>
<li class="toggle"><a href="#nowhere"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>
This is the navbar js code:这是导航栏 js 代码:
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
item.addEventListener("keypress", toggleItem, false);
}
I want navbar to be closed when I click on a menu option.我希望在单击菜单选项时关闭导航栏。 Any solution here?
这里有什么解决办法吗? thanks
谢谢
You can add the click to the menu instead of just the.toggle link您可以将点击添加到菜单中,而不仅仅是 .toggle 链接
const toggle = document.querySelector(".toggle"); const menu = document.querySelector(".menu"); /* Toggle mobile menu */ function toggleMenu() { menu.classList.toggle("active"); const icon = toggle.querySelector("a i.fas"); icon.classList.toggle('fa-bars'); icon.classList.toggle('fa-times'); } /* Event Listeners */ menu.addEventListener("click", toggleMenu, false);
#navbar.item { display: none; } #navbar.menu.active.item { display: list-item; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/> <nav id="navbar"> <ul class="menu"> <li class="logo"> <a href="#"><img src="img/LOGO JS BLANCO PNG.png"></a> </li> <li class="item"><a href="#home">Home</a></li> <li class="item"><a href="#about">About</a></li> <li class="item"><a href="#portfolio">Portfolio</a></li> <li class="item"><a href="#knowledge">Knowledge</a></li> <li class="item"><a href="#experience">Experience</a></li> <li class="item"><a href="#contact">Contact</a></li> <li class="toggle"><a href="#nowhere"><i class="fas fa-bars"></i></a></li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.