Задать вопрос
@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();
});


Подскажите как это можно сделать по другому!!
  • Вопрос задан
  • 214 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Stalker_RED
@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');
  }
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы