请告诉我为什么当你点击 .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>
您不需要在循环内使用 catalogItems 执行另一个循环。问题就出在这里,当你老是点击的时候,整个catalogItems集合都整理出来了,最终在最后一个元素上加了一个class。只需通过引用下一个元素
nextElementSibling并添加所需的类。