0

Друзья всем привет. Я изучаю JS и решил попробовать свои силы и написать функционал для работы аккордиона с нуля. Задачу поставил довольно простую: при клике по шапке аккордиона (item), должен показываться текстовый контент. При повторном клике он должен скрываться, а также он должен скрываться при клике по шапке другой ячейки. Для реализации этой задачи я написал следующий код:

HTML
 <div class="block">
        <div class="block__item">
            <div class="block__title">Заголовок 1</div>
            <div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
        </div>  
    
        <div class="block__item">
            <div class="block__title">Заголовок 2</div>
            <div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
        </div>  
    
        <div class="block__item">
            <div class="block__title">Заголовок 3</div>
            <div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
        </div>  
    </div>
SASS
.block
    &__title
        position: relative
        text-transform: uppercase
        letter-spacing: 2px
        padding-left: 30px
        cursor: pointer
        transition: 0.3s all
        &::before
            content: ''
            width: 10px
            height: 1px
            background-color: black
            position: absolute
            top: 5px
            transform: rotate(40deg)
            left: 0
        &::after
            content: ''
            width: 10px
            height: 1px
            background-color: black
            position: absolute
            top: 5px
            transform: rotate(-40deg)
            left: 7px
    &__text
            display: none
            padding-top: 10px
    &__item
            margin-bottom: 20px
        
.block__title.active
    &::before
        background-color: red
        transform: rotate(-40deg)
    &::after
        background-color: red
        transform: rotate(40deg) 

.block__text--active
    display: block
JS
let accHeader = document.querySelectorAll('.block__item'),
    accContent = document.querySelectorAll('.block__text');

accHeader.addEventListener('click', function(){
    for(let i = 0; i < accHeader.length; i++){
        if(accContent[i].classList.contains('.block__text--active')){
            accContent[i].classList.remove('block__text--active');
            accContent[i].classList.add('block__text--active');
        } else{
            accContent[i].classList.add('block__text--active');
        }
    }
});

А теперь немного о том, как по моему мнению должен был отработать данный код:

  1. Логичнее всего в данном случае повесить обработчик событий на accHeader, так как в нем содержится и title и иконка и куда бы не нажал пользователь аккордион будет срабатывать.

  2. block__item, который является значением переменной accHeader, на странице не один, а значит внутри обработчика событий нам нужен цикл, который переберет все такие элементы на странице. В параметрах цикла for мы указываем что переменная i < accHeader.length, тем самым давая коду возможность самостоятельно проверять количество таких элементов на странице.

  3. Цикл написан и теперь надо добавить только класс active для accContent. Но перед этим нам нужно проверить нет ли там уже этого класса. Поэтому внутри цикла мы пишем условие if else. Если у accContent есть класс .block__text--active, мы его сначала удаляем, а потом добавляем снова, а если его нет, то просто его добавляем. Такое условие как раз и позволяет нам скрывать текс при повторном клике по шапке аккордиона и при клике по шапке следующей ячейки. Кроме того после accContent мы ставим [i], для того чтобы на каждой итерации цикла связать определенный item с определенным текстом.

А теперь уважаемые знатоки, внимание вопрос: Почему этот код не работает?

6
  • accHeader - это не один элемент, а список элементов. Зачем эти стили: .block__title.active { ... }? У вас всё равно нигде не выдаётся класс active элементу.
    – ΝNL993
    Commented 26 сент. 2022 в 12:15
  • Проще будет использовать .classList.toggle() вместо remove() и add(), тогда и проверки в цикле не нужно будет никакой
    – Simon
    Commented 26 сент. 2022 в 12:15
  • Это от предыдущих экспериментов, забыл удалить) Commented 26 сент. 2022 в 12:15
  • К слову, зачем вы после проверки убираете и сразу же выдаёте тот же класс элементу?
    – ΝNL993
    Commented 26 сент. 2022 в 12:17
  • Simon попробовал с .classList.toggle(), не работает Commented 26 сент. 2022 в 12:19

1 ответ 1

0

Самый простой пример с classList.toggle() вместо всяких remove() и затем add(). Простите что скипнул весь Ваш SCSS код, но когда Вы его прикладываете к вопросу, желательно чтобы это был CSS, так как никто его за Вас компилить не будет.

Ну в принципе проблемка в том что document.querySelectorAll() получает список элементов, а не один элемент, потому Вы не можете повесить на него слушатель. Потому если хочется использовать document.querySelectorAll('.block__item'), то по списку нужно будет пройтись, чтобы повесить лиснеры где это необходимо. В примере я воспользовался методом .forEach(). На каждый из элементов с .block__title внутри блока .block__item вешаем клик лиснер и при клике просто делаем toggle active класса и все.

const accHeader = document.querySelectorAll('.block__item')

accHeader.forEach((element) => {
  element.querySelector('.block__title').addEventListener('click', () => {
    element.querySelector('.block__text').classList.toggle('block__text--active');
  });
});
.block__text {
  display: none;
}

.block__text--active {
  display: block;
}
<div class="block">
  <div class="block__item">
    <div class="block__title">Заголовок 1</div>
    <div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
  </div>

  <div class="block__item">
    <div class="block__title">Заголовок 2</div>
    <div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
  </div>

  <div class="block__item">
    <div class="block__title">Заголовок 3</div>
    <div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
  </div>
</div>

2
  • Спасибо! Теперь все понятно. А если бы я использовал getElementsByClassName, тот код который приводил я был бы рабочим? Меня интересует фундаментально этот алгоритм правильный или все-таки нет? Commented 26 сент. 2022 в 13:17
  • Нет, так как он возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имён классов. Можете ознакомиться
    – Simon
    Commented 26 сент. 2022 в 13:22

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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