點擊鏈接后隱藏菜單 - HTML/JS

Question

單擊鏈接后，我正在嘗試制作隱藏的響應菜單。 當我單擊第一個鏈接時，它正在工作，但是當我單擊另一個鏈接時，菜單並沒有消失。 我也試過 nava = document.querySelectorAll('.nav_links a'); 但是即使單擊第一個鏈接后菜單也沒有關閉。

const navSlide = () => {
    const burger = document.querySelector('.nav_links_menu');
    const nav = document.querySelector('.nav_links');
    const nava = document.querySelector('.nav_links a');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        //Burger Animation
        burger.classList.toggle('toggle');
    })

    nava.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        burger.classList.toggle('toggle');
    })
}

Answer 1

您必須綁定所有標簽。 你已經嘗試過：

nava = document.querySelectorAll('.nav_links a' .

然后你已經迭代了這個集合的每個元素並像這樣添加事件監聽器：

 const navSlide = () => { const burger = document.querySelector('.nav_links_menu'); const nav = document.querySelector('.nav_links'); const nava = document.querySelectorAll('.nav_links a'); nava.forEach(n => { n.addEventListener('click', (e) => { e.preventDefault(); nav.classList.toggle('nav_active'); burger.classList.toggle('toggle'); }) }) } navSlide();

 .nav_active { background: green; }

 <div class="nav_links_menu"> <div class="nav_links"> <a href="nav_active">1</a> <a href="">2</a> <a href="">3</a> </div> </div>