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

Question

[hooli-gun]

Почему класс добавляет только первому?

<ul>
  <li class="menu-item-type-custom">
    <ul class="sub-menu">
      <li></li>
    </ul>
  </li>
  <li class="menu-item-type-custom">
    <ul class="sub-menu">
      <li></li>
    </ul>
  </li>
  <li class="menu-item-type-custom">
    <ul class="sub-menu">
      <li></li>
    </ul>
  </li>
</ul>

document.querySelector('.menu-item-type-custom').addEventListener('click', _=> {
  document.querySelector('.sub-menu').classList.toggle('clicked');
})

Answer 1

[Алексей Володин]

Потому что querySelector возвращает только первый элемент.
Смотрите в сторону querySelectorAll

Comments

[hooli-gun]

а querySelectorAll не работает

[0xD34F]

hooli-gun, не ври, балбес. Всё работает.

[Алексей Володин]

hooli-gun, querySelectorAll + цикл. Все отлично работает

[Sergei Nazarenko]

hooli-gun,

let el = document.querySelectorAll('.menu-item-type-custom');
el.forEach(item => {
    item.addEventListener('click', function() {
        alert('alles arbeiten!');
    });
});

[Сергей delphinpro]

hooli-gun,

а querySelectorAll не работает

Жертва jquery =))