Создание Аккордеона на jQuery
Сегодня мы рассмотрим самый простой способ сделать аккордеон (accordion) на jQuery.
Поделиться Отправить Класснуть Запинить
Скрипт аккордеона на jQuery
Комплексный скрипт аккордеона, включающий HTML, CSS, JS:
JS: $(".accordeon dd").hide().prev().click(function() < $(this).parents(".accordeon").find("dd").not(this).slideUp().prev().removeClass("active"); $(this).next().not(":visible").slideDown().prev().addClass("active"); >); CSS: .accordeon .active < color: red >HTML: - Заголовок
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ea, accusamus. Numquam non commodi ipsum debitis repudiandae amet vero itaque, deserunt, ad neque libero quae officia. Facilis non, possimus doloribus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis voluptatem repellat? Blanditiis iste, exercitationem porro, magni amet cupiditate enim, labore tenetur, praesentium quam consequuntur nesciunt. Culpa dicta adipisci voluptatem.
- Заголовок
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis voluptatem repellat? Blanditiis iste, exercitationem porro, magni amet cupiditate enim, labore tenetur, praesentium quam consequuntur nesciunt. Culpa dicta adipisci voluptatem.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «Верстка»
- Создание красивого сайта с 3D эффектом Parallax | Материалы урока
- Создание сайта с крутой анимацией скролла (GSAP) | Материалы урока
- Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
- Создание сайта портфолио с крутой анимацией | Материалы урока
- Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
- Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
jQuery. Пишем аккордеон с применением эффектов
Итак, мы будем писать простой аккордеон на jQuery. Для этого я сделаю небольшой экскурс в теорию.
Небольшое введение в эффекты
Самые простые эффекты в jQuery это hide() — show() и slideUp() и slideDown() .
Итак, hide(time) – скрывает элемент, к которому применяется за время, указанное в качестве параметра (время указывается в миллисекундах). Как работает эффект? За указанное время начинает уменьшаться высота и ширина элемента, значения padding и margin . Когда данные значения уменьшаются до нуля – к элементу применяется свойство display: none .
Эффект show() – работает аналогично, только в обратную сторону. Также, существует эффект анимации toggle() – который либо скрывает, либо показывает элемент с учетом его текущего состояния. Смотрим пример:
Эффекты slideUp() и slideDown() работают аналогично, только изменяется высота элемента. После того, как высота становится равна нулю – применяется свойство display: none .
Время эффектов указывается в миллисекундах. Так 3000 – это три секунды.
Также существует эффект slideToggle() , который переключает состояние элемента.
Смотрим примеры и код:
Строим аккордеон
Теперь строим аккордеон. Пусть у нас будет общий блок #accordeon внутри которого и будет размещаться наш код. Внутри данный блок будет содержать блок с заголовком ( .acc-head ) и блок с текстом( .acc-body ), который в начальном состоянии скрыт.
Код html выглядит следующим образом:
Аккордеон меню на jQuery
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.
Dolor sit amet.
Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.
fingerprint
Rerum necessitatibus
Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi
Этот пример на Codepen
Создаём HTML основу
Пункты меню располагаются в родительском блоке Каждый пункт меню имеет заголовок и область контента
extension Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus. eco Dolor sit amet. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus. fingerprint Rerum necessitatibus Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi
Опишем стили CSS
При добавлении активного класса .about-item_active блоку .about-item зададим стили для его элементов .about-item__head и .about-item__icon
.about < padding: 60px 0; >.about__item:not(:last-child) < margin-bottom: 15px; >.about-item__head < background: #283845; padding: 15px 30px; color: #fff; font-size: 18px; border-radius: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* отключаем выделение текста при нажатии на блок заголовка */ display: flex; align-items: center; transition: 0.3s ease; >.about-item__head:hover < background: #24323e; >.about-item__title < font-weight: 700; >.about-item__icon < margin-right: 15px; line-height: 1; transition: 0.3s ease; >.about-item__body < padding: 30px; font-size: 16px; background: #fff; border-radius: 8px; color: #283845; display: none; margin-top: 10px; >.about-item_active .about-item__head < background: #22303b; /* в активном состоянии блока .about__item фон заголовка .about-item__head меняет цвет */ >.about-item_active .about-item__icon < color: #8cb369; /* в активном состоянии блока .about__item иконка .about-item__icon меняет цвет */ >
Пишем jQuery код
jQuery код с комментариями
$(document).ready(function()< // DOM готов для взаимодействия с ним function accordion(parentSelector, itemSelector, itemActiveClass, headSelector, contentSelector, duration) < // объявляем функцию и принимаем параметры let locked = false // объявляем переменную для блокировки клика при активной анимации $(parentSelector).click(function(e)< // при клике на родительский блок, селектор которого передаем первым параметром (parentSelector) const target = $(e.target) // записываем в константу элемент, где был клик const item = target.closest(itemSelector) // ищем ближайший родительский блок, где был клик, по селектору, который передаем вторым параметром (itemSelector) const itemHead = item.find(headSelector) // ищем заголовок (4й параметр) в блоке, где был клик const itemContent = item.find(contentSelector) // ищем блок контента в блоке (5й параметр), где был клик const siblings = item.siblings() // ищем соседние блоки, расположенные на том же уровне, что и блок, где был клик const siblingsContent = siblings.find(contentSelector) // ищем блок контента(5й параметр) у соседских блоков if (!target.closest(headSelector).length) return // если клик был не на блоке заголовка, прерываем функцию, то есть ничего не делаем if (locked) return // если клик заблокирован, тоже прерываем функцию if (!item.hasClass(itemActiveClass)) < // если блок, где был клик, не имеет активного класса locked = true // блокируем клик siblings.removeClass(itemActiveClass) // удаляем у соседских блоков активный класс siblingsContent.slideUp(duration) // сворачиваем блок контента у соседских блоков (6 параметр - duration - продолжительсность анимации) item.addClass(itemActiveClass) // добавляем активный класс блоку, где был клик itemContent.slideDown(duration, function()< // разворачиваем блок контента у блока, где был клик, после окончания анимации запускаем другую функцию, чтобы снять блокировку клика locked = false >) > else < // если блок, где был клик, имеет активный класс locked = true // блокируем клик item.removeClass(itemActiveClass) // удаляем активный класс блоку, где был клик itemContent.slideUp(duration, function()< // сворачиваем блок контента у блока, где был клик, после окончания анимации запускаем другую функцию, чтобы снять блокировку клика locked = false >) > >) > accordion('.about-items', '.about-item', 'about-item_active', '.about-item__head', '.about-item__body', 300) // запускаем функцию с параметрами accordion('.briefly-cards', '.briefly-card', 'briefly-card_active', '.briefly-card__head', '.briefly-card__text', 600) // если будут еще похожие меню, но с другими названиями классов, то запускаем эту же самую функцию, передавая ей просто другие параметры >)
Передаваемые параметры
- parentSelector — селектор родительского блока — ‘.about-items’
- itemSelector — селектор блока пункта меню — ‘.about-item’
- itemActiveClass — активный класс блока пункта меню — ‘about-item_active’
- headSelector — селектор блока заголовка — ‘.about-item__head’
- contentSelector — селектор блока контента — ‘.about-item__body’
- duration — продолжительность анимации разворачивания/сворачивания блока контента — 300
Описание некоторых нюансов
- Блокировка клика нужна для того, чтобы при многократном клике на заголовок анимация не запускалась несколько раз. Как только анимация запускается, блокируем клик, как только анимация заканчивается, снимаем блокировку
- Параметры передаем в том порядке в котором они записаны. В данном случае параметры передаем строками в кавычках. Если это селектор, не забываем ставить точку ( ‘.about-item’ ). Если это название класса, указываем без точки ( ‘about-item_active’ )
- Последним параметром передаем число без кавычек — продолжительность анимации разворачивания/сворачивания блока контента
Простой аккордеон на JQuery
Цель: сделать простой аккордеон на JQuery.
Структура простого аккордеона:
Why should I buy gold? So why don’t you acquire your own gold reserve?
Решение на JQuery:
$('#navigation > div').hide(); $('#navigation > h3').on('click', function () < var tru = $(this).hasClass('active'); if (tru === false) < $('#navigation >h3').removeClass('active'); $(this).addClass('active'); $('#navigation > div').hide('fast'); var nextDiv = $(this).next(); var visibleSiblings = nextDiv.siblings('div:visible'); if (visibleSiblings.length) < visibleSiblings.slideUp('fast', function () < nextDiv.slideToggle('fast'); >); > else < nextDiv.slideToggle('fast'); >> >);
Версия v.2. Добавлено/исправлено:
- При клике на активный пункт простого аккордеона на JQuery не происходит события.