Подскажите пожалуйста почему при клике на .catalog__title открывается всегда последний блок .catalog__items, а не у каждого свой? Спасибо
function catalog() {
const catalogTitles = document.querySelectorAll('.catalog__title');
const catalogArrows = document.querySelectorAll('.catalog__item-arrow');
const catalogItems = document.querySelectorAll('.catalog__items');
if (catalogTitles) {
catalogTitles.forEach(title => {
title.addEventListener('click', (e) => {
catalogItems.forEach(item => {
catalogItems.forEach(el => { el.classList.remove('_catalog-open'); });
item.classList.add('_catalog-open')
});
})
});
catalogArrows.forEach(arrow => {
arrow.addEventListener("click", function (e) {
catalogItems.forEach(el => { el.classList.remove('_catalog-open'); });
});
});
}
}
catalog()
.catalog__title {
padding: 15px 100px;
cursor: pointer;
}
.catalog__items {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -110%;
padding: 0px 16px 0px 16px;
transition: left 0.3s ease 0s;
overflow: auto;
background: grey;
}
.catalog__items._catalog-open {
left: 0;
}
<div class="body">
<div class="catalog__column">
<div class="catalog__content">
<div class="catalog__link">
<div class="catalog__title">
Клик
</div>
<div class="catalog__items">
<div class="catalog__item-arrow">Клик назад</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст1</a>
</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст2</a>
</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст3</a>
</div>
</div>
</div>
</div>
</div>
<div class="catalog__column">
<div class="catalog__content">
<div class="catalog__link">
<div class="catalog__title">
Клик
</div>
<div class="catalog__items">
<div class="catalog__item-arrow">Клик назад</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст4</a>
</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст5</a>
</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст6</a>
</div>
</div>
</div>
</div>
</div>
<div class="catalog__column">
<div class="catalog__content">
<div class="catalog__link">
<div class="catalog__title">
Клик
</div>
<div class="catalog__items">
<div class="catalog__item-arrow">Клик назад</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст7</a>
</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст8</a>
</div>
<div class="catalog__item">
<a href="#" class="catalog__subsubtitle">Текст9</a>
</div>
</div>
</div>
</div>
</div>
</div>