[英]Close menu when link is clicked
I have an off-canvas menu that flies out when a toggle-button is clicked - so far so good.我有一个画布外菜单,当单击切换按钮时会飞出 - 到目前为止一切都很好。 All menu links share the same class name (in this case.nav-link).所有菜单链接共享相同的 class 名称(在本例中为.nav-link)。 I need the menu to close when any of the links are clicked, I think have selected them all and I think I have to loop through an array of the selection but I'm unsure implement it.单击任何链接时,我需要关闭菜单,我认为它们已经全部选中,并且我认为我必须遍历选择的数组,但我不确定是否实现它。 Right now nothing happens when a link is clicked.现在点击链接时没有任何反应。
My HTML:我的 HTML:
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">articles</a></li>
<li class="nav-item"><a href="#" class="nav-link">tags</a></li>
<li class="nav-item"><a href="#" class="nav-link">links</a></li>
<li class="nav-item"><a href="#" class="nav-link">archive</a></li>
</ul>
My CSS:我的 CSS:
.nav-list {
margin: 0;
margin-top: 3.2em;
padding: 0;
background: #777;
width: 100%;
transform: translateX(-100%);
transition: transform 300ms cubic-bezier(.5, 0, .5, 1);
}
My JS:我的 JS:
const navToggle = document.querySelector('.nav-toggle')
const navLink = document.querySelectorAll('.nav-link')
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open')
})
navLink.addEventListener('click', () => {
document.body.classList.remove('nav-open')
})
You're trying to add an event listener to a collection of nodes ( querySelectorAll
for .nav-link
vs querySelector
for .nav-toggle
).您正在尝试将事件侦听器添加到节点集合( .nav-link
querySelectorAll
与.nav-toggle
的querySelector
)。 You can either iterate over the collection and add your click
event listener to each item or simply listen to the parent element of the .nav-link
s:您可以遍历集合并将click
事件侦听器添加到每个项目,或者只是侦听.nav-link
的父元素:
const navToggle = document.querySelector('.nav-toggle')
// replace this with something more sensible
const navLinkParent = document.querySelector('.nav-link').parentElement;
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open')
})
// this is adding a click listener to ONE element
navLinkParent.addEventListener('click', (event) => {
// check if the clicked element matches what you're after
if (event.target.classList.contains('nav-link')) {
document.body.classList.remove('nav-open')
}
})
You must use a loop because querySelectorAll
returns an array.您必须使用循环,因为querySelectorAll
返回一个数组。
const navToggle = document.querySelector('.nav-toggle') const navLink = document.querySelectorAll('.nav-link') navToggle.addEventListener('click', () => { document.body.classList.toggle('nav-open') }) for (var i = 0; i < navLink.length; ++i) { navLink[i].addEventListener('click', () => { if(navToggle.classList.contains('nav-toggle')){ (navToggle.classList.remove('nav-toggle'); } }); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.