单击其中一个链接后，如何让导航菜单消失？

问题描述

这是我第一次在这里提问，所以如果它令人困惑，请原谅我。我在 youtube 上做了一个来自 DevEd 的在线教程，他向您展示了如何编写响应式动画导航栏。原始视频可以在这里找到...

https://www.youtube.com/watch?v=gXkqy0b4M5g&list=PLbt4Kgx40Ie0bXokczYmcdxLD_KvYDXv9&index=5&t=101s&ab_channel=DevEd

我想知道的是如何更改 js，以便在单击链接和单击汉堡按钮时导航菜单消失。这是 HTML...

<body>
    <nav>
        <div class="logo">
            <h4>The Nav</h4>
        </div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>

    <script src="app.js"></script>
</body>

这里是js...

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
//toggle nav
    burger.addEventListener('click',() => {
        nav.classList.toggle('nav-active'); 

//animate links
    navLinks.forEach((link,index) => {
            if (link.style.animation) {
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;

            }
        });
//burger animation
    burger.classList.toggle('toggle');
    
    }); 

}

navSlide();

我是这方面的相对新手，所以请放轻松。提前致谢！

解决方法

转到函数中要隐藏导航栏的位置，然后执行：

document.getElementsByTagName("nav")[0].style.display = "none";

经过一番挖掘，我发现了一个类似的问题，这是解决方案：

  const closeNav = () => {
    nav.classList.toggle('nav-active');
    burger.classList.toggle('toggle');
  }
  navLinks.forEach(link => link.addEventListener('click',closeNav));
}

在 burger.classList.toggle('toggle'); }); 之后添加到 ajvascript

html javascript nav nav