Блог

Я хочу сделать выпадающее меню при нажатии на itemDropDown, работает только первое, а остальные нет, querySelectorAll выдает ошибку, что я делаю не так? Я прикрепил jsfidle, чтобы вы могли помочь, пожалуйста, не обращайте внимания на scss. http://jsfiddle.net/rhy7pv1f/46 /

 const itemDropDown = document.querySelectorAll('.menu__list-item.drop__down'),
            itemList = document.querySelector('.drop__down-list');


itemDropDown.forEach((buttonItem) => {
  buttonItem.addEventListener('click', () => {
    itemList.classList.toggle('active');
  })
})
 

Все ваши обработчики переключают класс того itemList , который вы создаете в начале.

Вам нужно настроить таргетинг на соответствующий список для каждой кнопки.

 const itemDropDown = document.querySelectorAll('.menu__list-item.drop__down');


itemDropDown.forEach((buttonItem) => {
  const relatedDropdownList = buttonItem.querySelector('.drop__down-list');
  const dropDownLink = buttonItem.querySelector('.menu__list-link');

  dropDownLink.addEventListener('click', () => {
    relatedDropdownList.classList.toggle('active');
  });

})
 

Обновлен fiddle на http://jsfiddle.net/gaby/k7b0m95a/5 /