Как сделать что-бы действие применялось только в том блоке, где находятся кнопки и изменялось js в зависимости от размера экрана?
Как сделать что-бы действие переключения применялось только в том блоке, где находятся кнопки? Так-же до 768px клик идет по переключателю, после 768px клик идет на заголовки, как сделать что-бы код js переходил в это состояние без перезагрузки страницы?
Так-же до 768px клик идет по переключателю, после 768px клик идет на заголовки, как сделать что-бы код js переходил в это состояние без перезагрузки страницы?
Во первых, ставить обработчик события, в вызове функции resize не снимая его - это даже не ошибка, а преступление )
Насколько я понял - нужно чтобы
- при клике на заголовке (при любом разрешении экрана) переключался нужный контент и отмечался заголовок
- при клике на переключатель (при любом разрешении экрана) переключался нужный контент и переключались нужные заголовки
Так что особо следить за разрешением не нужно, нужно один раз поставить обработчики событий. Если по каким-то религиозным соображениям не нужно реагировать на клик по заголовку на "широком экране" - можно в обработчике игнорировать.
Скрываться-показываться переключатель будет сам, посредством css.
Никакого обработчика ресайза не нужно.
Чтобы найти в обработчике клика нужный блок - нужно помнить, что e.target указывает на элемент, который непосредственно кликнули, и двигаясь вверх по родительским элементам его можно обнаружить. Что-то вроде
function nearest(el, sel) {
while (el && !(el.matches(el,sel))) {el = el.parentElement};
return el;
}
... .addEventListener("click", function (e) {
let block=nearest(e.target,'.toggle'),
content_1=block.querySelector('.toggle-content[data-id="1"]'),
...
})
