Как сделать раскрывающее меню на javascript?

Как в jQuery реализован функционал SlideUp и SlideDown?
Хочу его написать на javascript.

Имеется рабочий код на jQuery, при нажатии раскрывается и сворачивается список
jQuery(document).ready(function(){
	var accordionsMenu = $('.cd-accordion-menu');
	if( accordionsMenu.length > 0 ) {
		accordionsMenu.each(function(){
			var accordion = $(this);
			accordion.on('change', 'input[type="checkbox"]', function(){
				var checkbox = $(this);
				console.log(checkbox.prop('checked'));
				( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
			});
		});
	}
});


Сейчас сворачивание реализовал так, первоначально задаю css max-height: 0
.sub-menu { overflow: hidden; max-height: 0; transition: all .4s ease-out; }

Затем меняю это значение на max-height: 999px после чего меню разворачивается.

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

Почему меня это волнует: Нужна гибкость, вдруг элементы не войдут в 999px, могу задать 9999px, но тогда имею задержку в сворачивании, так как высота большая долго сворачивается, сейчас более менее подогнал через css, но хочется сделать правильно.

Можно конечно при разворачивании элемента поменять высоту родительского элемента, но при большой вложенности это как-то...

Как это реализовано на jQuery, я про SlideUp/SlideDown?
  • Вопрос задан
  • 946 просмотров
Пригласить эксперта
Ответы на вопрос 3
@AlexBergal
Анимация на css без привязки к высоте - anination

В кейфреймах указываете нужное состояние для старта, финиша и аромежуточного вычисляемого положения

Почти как transition, только мощнее и гибче
Ответ написан
@densis2003
Если надо просто список показывать скрывать по клику может воспользоваться обычным html тегом
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
Его и стелезировать можно, и не надо мудрить со js
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
08 апр. 2020, в 22:52
5000 руб./за проект
08 апр. 2020, в 21:19
10000 руб./за проект
08 апр. 2020, в 20:18
35000 руб./за проект