@shelganov

Как сделать аналог slideToggle на JS?

Мобильное меню разворачивается при клике на картинку с помощью функции slideToggle.
Хочу переделать на классы, а с помощью js добавлять или удалять класс. Проблема в том что анимация работает только если height указывать в пикселях, а я хочу чтоб высота блока была равна контенту. К тому же в меню есть ещё подменю которое тоже разворачивается. Подскажите друзья

mobHamburger.onclick = function () {
 if (menuMobile.classList.contains("menu-mobile--open")) {
    menuMobile.classList.remove("menu-mobile--open");
}
  else {
    menuMobile.classList.add('menu-mobile--open');
}
}


.menuMobile {
width: 100%;
height: 0;
transition: all .5s;
}

.menu-mobile--open {
height: 100%;
}
  • Вопрос задан
  • 6609 просмотров
Решения вопроса 1
@soledar10
html css3 js jquery
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@s-jet
У jquery тоже есть slideToggle, к примеру если:

<div class="mobHamburger">
  Картинка
  <div class="menuMobile">
        Подменю с любой высоты
  </div>
</div>


То:
$(".mobHamburger").click(function(){
	$(this).children(".menuMobile").toggleClass("menu-mobile--open").slideToggle("slow");
});
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект