Как добавить класс элементу при клике?

Question

[hooli-gun]

Как добавить класс .mega-menu__item, по клику на пункт меню?

<nav class="main-navigation">
  <ul class="maga-menu__list">
    <li class="mega-menu__item">
      <a class="mega-menu__link">menu1</a>
      <ul class="sub-menu hide">
        <li>sub-menu</li>
        <li>sub-menu</li>
        <li>sub-menu</li>
      </ul>
    </li>
    <li class="mega-menu__item">
      <a class="mega-menu__link">menu2</a>
      <ul class="sub-menu hide">
        <li>sub-menu</li>
        <li>sub-menu</li>
        <li>sub-menu</li>
      </ul>
    </li>
    <li class="mega-menu__item">
      <a class="mega-menu__link">menu3</a>
      <ul class="sub-menu hide">
        <li>sub-menu</li>
        <li>sub-menu</li>
        <li>sub-menu</li>
      </ul>
    </li>
  </ul>
</nav>

a {
  display: block;
  margin: 10px 0;
}

button {
  display: block;
}

.hide {
  display: none;
}

const handleClick = event => {
  const subMenu = document.querySelectorAll(".sub-menu")
  const target = event.target.nextElementSibling
  target.classList.toggle("hide")

  subMenu.forEach(item => {
    if (item !== target) {
      item.classList.add("hide")
    }
  })
}

document.querySelectorAll(".mega-menu__link").forEach(item => {
  item.addEventListener("click", handleClick)
})

Comments

[scottparker]

нужно больше вопросов и технологий

Answer 1

[wadowad]

https://qna.habr.com/q/425186