ТЕЛЕГРАМ КАНАЛ: @frontendG1d
Пример реализации выпадающего списка на нашем любимом JavaScript с комментариями
JavaScript
// Получаем ссылку на элемент, к которому применяется анимация
const dropdownMenu = document.querySelector('.dropdown-menu');
// Получаем ссылку на кнопку, по нажатию на которую происходит открытие/закрытие списка
const dropdownToggle = document.querySelector('.dropdown-toggle');
// Переменная, хранящая информацию о том, открыто или закрыто меню
let isOpen = false;
// Функция для открытия или закрытия списка с анимацией
function toggleDropdownMenu() {
// Проверяем, открыто или закрыто меню
if (isOpen) {
// Если меню открыто, то устанавливаем высоту 0 для закрытия
dropdownMenu.style.height = '0';
} else {
// Если меню закрыто, то получаем высоту меню с содержимым
const menuHeight = dropdownMenu.scrollHeight;
// Устанавливаем для меню начальную высоту 0 перед анимацией
dropdownMenu.style.height = '0';
// Выполняем анимацию с использованием алгоритма плавности изменения высоты от 0 к menuHeight
dropdownMenu.style.transition = 'height 0.3s ease';
// Устанавливаем конечную высоту menuHeight для раскрытия меню
dropdownMenu.style.height = ${menuHeight}px;
}
// Инвертируем значение isOpen для следующего нажатия на кнопку
isOpen = !isOpen;
}
// Добавляем обработчик события нажатия на кнопку
dropdownToggle.addEventListener('click', toggleDropdownMenu);
Расскажем поподробнее:
- В первых трех строках получаем ссылки на элементы страницы, чтобы работать с ними в дальнейшем. В dropdownMenu сохраняется ссылка на элемент списка, а в dropdownToggle — на кнопку.
- Объявляем переменную isOpen, которая хранит информацию о текущем состоянии списка — открыт или закрыт.
- Далее определяем функцию toggleDropdownMenu(), которая будет вызываться при нажатии на кнопку и открытии списка.
- Функция проверяет актуальное состояние isOpen.
- Если меню открыто, включается анимация закрытия списка. Устанавливается начальная высота элемента как 0 пикселей dropdownMenu.style.height = '0';, что изменит высоту элемента на ноль, а анимация transition будет применена к этому изменению, чтобы меню плавно закрылось.
- Если меню закрыто, получаем его высоту с учетом содержимого const menuHeight = dropdownMenu.scrollHeight;. Создаем анимацию с использованием свойства transition для изменения высоты и плавного открытия меню.
- Устанавливаем конечную высоту dropdownMenu.style.height = ${menuHeight}px; равной значению menuHeight, что приведет к раскрытию меню с использованием заданной анимации высоты.
- В конце функции инвертируется значение переменной isOpen, таким образом, что она становится противоположной своему предыдущему значению. Это позволяет правильно установить состояние открытия/закрытия списка для следующего нажатия на кнопку.
- К последней строке добавляется обработчик события click, который будет вызывать функцию toggleDropdownMenu() при нажатии на кнопку.
#Javascript #код
2 минуты
16 февраля 2024