我有一個畫布外菜單，當單擊切換按鈕時該菜單會飛出 - 到目前為止一切順利。所有菜單鏈接共享相同的類名（在本例中為 .nav-link）。我需要在單擊任何鏈接時關閉菜單，我認為已經選擇了所有鏈接，并且我認為我必須循環遍歷選擇的數組，但我不確定是否實現它。現在，單擊鏈接時不會發生任何事情。我的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>我的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);}我的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')})
2 回答
函數式編程
TA貢獻1807條經驗 獲得超9個贊
您正在嘗試將事件偵聽器添加到節點集合（querySelectorAll for.nav-link與querySelectorfor .nav-toggle）。您可以迭代集合并將click事件偵聽器添加到每個項目，或者僅偵聽 s 的父元素.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')
}
})
白豬掌柜的
TA貢獻1893條經驗 獲得超10個贊
您必須使用循環，因為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');
}
});
}
- 2 回答
- 0 關注
- 146 瀏覽
添加回答
舉報
0/150
提交
取消