Закрыть меню при нажатии на ссылку

Question

У меня есть меню вне холста, которое вылетает при нажатии кнопки переключения - пока все хорошо. Все ссылки меню имеют одинаковое имя класса (в данном случае .nav-link). Мне нужно, чтобы меню закрывалось при нажатии на любую из ссылок, я думаю, что выбрал их все, и я думаю, что я должен l oop через массив выбора, но я не уверен, что реализую это. Сейчас при нажатии на ссылку ничего не происходит.

Мой 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')
})

Answer 1

Вы пытаетесь добавить прослушиватель событий в коллекцию узлов (querySelectorAll для .nav-link против querySelector для .nav-toggle). Вы можете либо перебрать коллекцию и добавить свой click слушатель событий для каждого элемента, либо просто прослушать родительский элемент .nav-link s:

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')
  }
})

Answer 2

Вы должны использовать al oop, поскольку 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');
      }
    });
}