0

Подскажите пожалуйста почему при клике на .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>

1
  • Потому вы в коде открываете все блоки по-очереди, закрывая остальные. 10 мар в 3:18

1 ответ 1

3

Вам нет необходимости внутри цикла делать еще один цикл с catalogItems. В этом и кроется проблема, у Вас всегда при клике перебирается вся коллекция catalogItems и в конечном счете добавляется класс последнему элементу. Просто обращайтесь к следующему элементу через nextElementSibling и добавляйте нужный класс.

 catalogTitles.forEach(title => {
      title.addEventListener('click', (e) => {
        title.nextElementSibling.classList.add('_catalog-open');
      })
    });

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) => {
        title.nextElementSibling.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.