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

Question

[Анатолий]

Как в 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?

Answer 1

[frontend queen]

https://w3bits.com/javascript-slidetoggle/#slideUp

Comments

[Анатолий]

Не могу понять как работает пример.

Первоначально меню развернуто и пример не объясняет как это исправить, прописываю в css:

#target { box-sizing: border-box; display: block; transition-property: height, margin, padding; transition-duration: 500ms; height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

и все свернулось, но при этом слайдер перестает разворачиваться, потому что свойства присваиваются и тут же удаляются:

target.style.overflow = 'hidden';
    target.style.height = 0;
    target.style.paddingTop = 0;
    target.style.paddingBottom = 0;
    target.style.marginTop = 0;
    target.style.marginBottom = 0;
    target.offsetHeight;
    target.style.boxSizing = 'border-box';
    target.style.transitionProperty = "height, margin, padding";
    target.style.transitionDuration = duration + 'ms';
    target.style.height = height + 'px';
    target.style.removeProperty('padding-top');
    target.style.removeProperty('padding-bottom');
    target.style.removeProperty('margin-top');
    target.style.removeProperty('margin-bottom');
    window.setTimeout( () => {
      target.style.removeProperty('height');
      target.style.removeProperty('overflow');
      target.style.removeProperty('transition-duration');
      target.style.removeProperty('transition-property');
    }, duration);
  }

Попробовал удалить удаление, но тоже ничего не работает.

[Анатолий]

Есть еще рабочий вариант перебрать все элементы прогнать их по функции SlideUp(), но выглядит это не очень, хотя работает.

Нужно все таки решать через css.
Можно еще через Walker (в wordpress) замутить, чтобы инлайном прописывался style у элемента, но тоже так себе вариант.

[frontend queen]

Анатолий, вообще, слишком муторно постоянно атрибуты накидывать, потому такой вариант будет слаще

jsfiddle

[Анатолий]

frontend queen, это совсем не вариант, тут задана высота 400px, а у меня как раз проблема в том, что я не знаю высоту.
Предположим есть блок (список), который можно развернуть. Его высота рассчитывается просто, проблемы начинаются, когда в списке есть еще множество вложенных блоков готовых развернуться.

Пример: Родительский блок - 500px, но он не учитывает свернутый дочерний блок. И когда я разворачиваю дочерний блок, а родительский 500px, то часть элементов не видна, потому что не вошла в 500px.

Сейчас я задаю 999px, но меня этот вариант не устраивает, поэтому я и задал этот вопрос ))

[frontend queen]

Анатолий, как вариант, избавиться от фиксированной высоты
попробуйте такое: min-height: 500px; height: auto;

[Анатолий]

frontend queen, такое не работает, это мои первые попытки с этого начинались.

[frontend queen]

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

[Анатолий]

frontend queen, нет такое мне не надо )

[frontend queen]

Анатолий, объясни, что нужно по итогу. меню горизонтальное или вертикальное?

[Анатолий]

frontend queen, ну вообще у меня вертикальное меню, оно используется в мобильном версии и сбоку в сайдбаре. Оно рабочее и меня устраивает. Вопрос только в том, что я хотел узнать как реализовать UpSlider/DownSlider на javascript.
Изначально Вы дали мне рабочий пример, но я его не совсем понял, но ответ был релевантный. Далее Вы свернули куда совсем не в ту сторону.

Меню примерно такое, только вложенность не 2 уровня, а не ограниченная.

[frontend queen]

Анатолий, оке.
если говорить про сам скрипт, то ситуация, похоже, такая:

// отбираем все дропдауны
const dropdown = document.getElementsByClassName("dropdown-btn");
let i;

for (i = 0; i < dropdown.length; i++) {
    // на каждый из них навешиваем обработчик
    dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active");
        // дефайним контент дропдауна (стоит учесть, что контент в разметке должен быть следующим соседом)
        let dropdownContent = this.nextElementSibling;
   
        // тугглим видимость
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}

пример (придется немного пошаманить с высотой крайнего)

[Анатолий]

frontend queen, это совсем не то!
Тут нет "анимации", блок просто раскрывается. Он должен раскрываться/закрываться за 500мс, а не 0мс!
Здесь нет даже намека на DownSlide и UpSlide.

Answer 2

[AlexBergal]

Анимация на css без привязки к высоте - anination

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

Почти как transition, только мощнее и гибче

Comments

[Анатолий]

И к чему это очевидное утверждение?

[AlexBergal]

Анатолий, забей, видимо рановато для тебя

[Анатолий]

AlexBergal, css рано учить? )) Конечно, молод я еще.

Answer 3

[Денис]

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

Comments

[Анатолий]

Разве вопрос про это?