Контакты

Достижения

Все достижения (8)

Наибольший вклад в теги

Все теги (83)

Лучшие ответы пользователя

Все ответы (270)
  • Как улучшить аккордеон на чистом JS?

    villiwalla
    @villiwalla
    HTML-верстка

    >accordBlocks[i].style.display = 'none';//Первоначальное скрытие всех блоков аккордиона

    Просто сразу в верстке классом укажи hide. И удали этот цикл вообще.

    for (let i = 0; i < accordBlocks.length; i++) {
            accordBlocks[i].style.display = 'none';//Закрытие элемента аккордеона
            accordTitles[i].style.color = 'black';//Смена цвета заголовка элемента аккордеона
          }
          accordBlocks[j].style.display = 'block';//Раскрытие элемента аккордеона
          accordTitles[j].style.color = '#fa05f6';//Смена цвета заголовка элемента аккордеона
        });


    Перенеси это в другую функцию. Первая будет инициализировать аккордеон вещая на него слушателя события, а вторая вызываться коллбэком и проверять открыт аккордеон или нет.

    Вот тебе пример:
    function accordionInit() {
     // Вешаешь события
    }
    
    function accordionToggle(event) {
       // event.target - тут надо уточнить как определяется открыт или закрыт аккордион.
      if(event.target.classList.contains('hide')) {
         // Открываем
      } else {
         // Закрываем
       }
    
    }

    Реализуй его на процедурке. Потом пробуй реализовать на прототипах.

    UPD: В случаие с accordionToggle цикл вообще не нужен
    Ответ написан
    2 комментария

Лучшие вопросы пользователя

Все вопросы (135)