@Dobby_Narko

Как сделать оптимизированный аккордеон?

Есть меню аккордеон. Но бывает при нажатие функция не срабатывает и стрелочка не переворачивается, или бывает не с первого раза раскрывается. Как оптимизировать код ? В чём вообще проблема ?
Прикладываю фотографию проблемы и сам код JS.

628a50b612e8f770268577.png

let el = document.getElementsByClassName('menu_item'); 
let down = document.getElementsByClassName('down')  //стрелочки
let isMenuShow = true;

console.log(el)
for(var i=0; i < el.length; i++) {
   el[i].addEventListener("click", showSub);  // открытие аккордеона 
   down[i].addEventListener("click", show)   //при нажатии стрелочки переворачиваются 
}
function show(d) {
    this.classList.toggle("open");  

}

function showSub(e) {
    if(isMenuShow) {
        this.children[1].style.height = "auto";
        this.children[1].style.overflow = "visible";
        this.children[1].style.opacity = "1";
        isMenuShow = false;
    }else {
        this.children[1].style.height = "0px";
       this.children[1].style.overflow = "hidden";
       this.children[1].style.opacity = "0";
        isMenuShow = true;
    }
}


.open{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ответы на вопрос 1
pLavrenov
@pLavrenov
Разработка сайтов
Весь функционал js части аккордиона сводится к тому чтобы установить или удалить css класс на родительском блоке в котором заголовок и контент. Все остальные лишнее и делается через css.
<div class="accordion">
    <div class="accordion-item toggle-this-class">
        <div class="header">Название</div>
        <div class="content">Текст</div>
    </div>
    <div class="accordion-item">
        <div class="header">Название</div>
        <div class="content">Текст</div>
    </div>
</div>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы