укладывается. Есть код:
var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
Получается, html дерево, это объект (или массив), элементы которого мы можем итерировать?
Вот пример того, как сделал я:
const accordion = document.querySelector('.accordion');
const title = document.querySelector('h1');
title.addEventListener('click', function () {
accordion.classList.toggle('show');
})
title.addEventListener('keydown', function (event) {
event.preventDefault();
if(event.code == 'Tab') {
accordion.classList.toggle('show')
}
})
Объясните, зачем в примере реализуют аккордеон через цикл for?
upd: Правильная ли у меня реализация?
> это объект (или массив) Массивоподобный объект, по которому можно итерироваться. Можно вешать листенеры на каждый элемент, тогда нужно использовать цикл. Можно повесить один листенер на родителя и внутри колбэка определять на кого кликнули.
Получается, если брать вот этот вариант: -> "Можно повесить один листенер на родителя и внутри колбэка определять на кого кликнули." То это надо отлавливать событие через event.target?
Какой вариант наиболее предпочтительный через event.target или же через for?
Кто как делает. Я использую вариант где один слушатель.
Обсуждают сегодня