單擊項目時如何關閉我的導航欄

Question

在移動視圖中，我的導航欄顯示在屏幕的一半上，我試圖在單擊某個項目后將其關閉，而不是只能通過單擊“X”來關閉它

我在 JavaScript 方面經驗不足，我仍在學習，我嘗試查看在線教程但沒有成功。

這是導航欄的 HTML：

<nav>
<div class="logo">
  <h4> Example</h4>
</div>
<ul class="nav-links">
  <li><a href="#About">About Us</a></li>
  <li><a href="#Services">Services</a></li>
  <li><a href="#Contact">Contact Us</a></li>
</ul>
<div class="burger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
</nav>

這是Javascript：

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');

burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');

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.classList.toggle('toggle');

});

}

navSlide();

我希望導航欄在單擊某個項目后關閉，並且能夠通過單擊“X”關閉

Answer 1

我知道帖子比較舊，但我找到了解決方案。

按照 Chris G 在評論中的提示，添加一些東西來解決鏈接不顯示的問題。 這就是這段代碼對我有用的方式：

1. 在 Chris 之后的 Js 中添加關閉導航：

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

當您單擊鏈接時，這可能會使導航欄關閉，但對我來說，當我再次單擊時，鏈接不會顯示。 所以我復制了過渡到鏈接的事件，代碼如下：

 const closeNav = () => { nav.classList.toggle('nav-active'); burger.classList.toggle('toggle'); //things i added to show the links again 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`; } }); } navLinks.forEach(link => link.addEventListener('click', closeNav)); }

我是js的初學者，但希望它能幫助遇到麻煩的每個人。

有一個好人：D