Аккордеон меню на чистом JavaScript, как правильно?

Question

[Виктор Викторов]

Учу JS, попытался написать аккордеон меню, но открывается лишь первый элемент во всем меню, к остальным скрипт почему-то не срабатывает: https://jsfiddle.net/mbfm21cm/3/
Важно все сделать на чистом JS, а так же понять принцип работы и в чем моя ошибка.

Answer 1

[0xD34F]

function toggleSubmenu() {
  const submenu = this.closest('li').querySelector('.rz-child-menu');
  submenu.classList.toggle('opened');
}

const vvOpen = document.querySelectorAll('.rz-open-menu-element');
vvOpen.forEach(n => n.addEventListener('click', toggleSubmenu));

.rz-left-menu ul li ul.rz-child-menu.opened {
  display: block;
}

или, вместо назначения обработчика клика каждому элементу индивидуально, можно применить делегированние:

document.querySelector('.rz-left-menu').addEventListener('click', function(e) {
  if (e.target.classList.contains('rz-open-menu-element')) {
    e.target.closest('li').querySelector('.rz-child-menu').classList.toggle('opened');
  }
});

Comments

[Виктор Викторов]

Выходит, что в переменную vvOpen записался массив из всех имеющихся в меню элементов с классом rz-open-menu-element? И Вы перебрали при помощи метода forEach каждый имеющийся в массиве элемент, в то время как я при помощи [0] выбирал лишь первый...
Проблема видимо была в том, что я не знал, что в переменную запишется массив из всех элементов с классом rz-open-menu-element