Здравствуйте! Прошу помощи в данном вопросе! Как реализовать данную часть?

Question

[K_Aleksey]

JS только начинаю учить!
Есть такой код:

<nav id="menu" class="header__nav">
        <ul class="nav__list">
          <li class="nav__item"><a href="#about" class="nav__link ">Обо мне</a></li>
          <li class="nav__item"><a href="#skills" class="nav__link">Скилы</a></li>
          <li class="nav__item"><a href="#work" class="nav__link">Работы</a></li>
          <li class="nav__item"><a href="#contacts" class="nav__link">Контакты</a></li>
      </ul>
      </nav>

Необходимо, чтобы на мобильной версии при нажатии на пункт меню, удалялся класс в теге <nav> и таким образом меню скрывалось. Так как классы (nav__link) одинаковые, у меня меню скрывается только при клике по первой ссылке. Я решил это добавив тегу <a> уникальные классы, но я понимаю, что это фигня.

Вот код моего корявого решения:)

var nav = document.querySelector('#menu');
var navCloseAbout = nav.querySelector('.link--about');
var navCloseSkills = nav.querySelector('.link--skills');
var navCloseWork = nav.querySelector('.link--work');
var navCloseContacts = nav.querySelector('.link--contacts');

navCloseAbout.addEventListener('click', function (e) {
    if (nav.classList.contains('nav--opened')) {
        nav.classList.remove('nav--opened');
        nav.classList.add('nav--closed');
    }
    e.preventDefault();
});

navCloseSkills.addEventListener('click', function (e) {
    if (nav.classList.contains('nav--opened')) {
        nav.classList.remove('nav--opened');
        nav.classList.add('nav--closed');
    }
    e.preventDefault();
});

navCloseWork.addEventListener('click', function (e) {
    if (nav.classList.contains('nav--opened')) {
        nav.classList.remove('nav--opened');
        nav.classList.add('nav--closed');
    }
    e.preventDefault();
});

navCloseContacts.addEventListener('click', function (e) {
    if (nav.classList.contains('nav--opened')) {
        nav.classList.remove('nav--opened');
        nav.classList.add('nav--closed');
    }
    e.preventDefault();
});

Подскажите как это можно сделать по другому!!

Answer 1

[Stalker_RED]

Выбрать несколько элементов по одному селектору можно при помощи querySelectorAll().

var menuLinks = document.querySelectorAll('.nav__link')
Array.prototype.forEach.call(menuLinks, function(link){ // menuLinks - это nodeList а не массив
  link.addEventListener('click', function(){ // добавляем обработчик к каждому
    if (nav.classList.contains('nav--opened')) {
        nav.classList.remove('nav--opened');
        nav.classList.add('nav--closed');
    }
  })
})

Или можно поместить один обработчик на родителе:

document.querySelector('.nav__list').addEventListener('click', function(evt){
  if (evt.target.tagName === 'A' && nav.classList.contains('nav--opened')) {
    nav.classList.remove('nav--opened');
    nav.classList.add('nav--closed');
  }
})

Comments

[gleendo]

Stalker_RED
Array.prototype.forEach.call

[K_Aleksey]

спасибо большое!))