25 бесплатных jQuery плагинов для создания табов и аккордеонов


Содержание
Цукерберг рекомендует:  Обрамления устройств для ваших скринов

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 535f3b7f3ea68d93 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

JQuery Аккордеон

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

Плагин теперь JQuery UI часть автономной версии не будет обновляться. Текущая версия 1.6.

Для получения более подробной информации о аккордеона, обратитесь к API документации складной элемент панели (аккордеон виджетов) .

стандарт

Стандартный код выглядит следующим образом:

Ненумерованный список с якоря и вложенного списка

С помощью опции

Контейнер представляет собой перечень определений, название дт, содержание дд.

jQuery Accordion Plugins

Download Free jQuery Accordion Menu, Accordion Slider, and other Accordion-style plugins at our jQuery Accordion Section. Page 1 .

Lightweight jQuery Accordion Plugin To Show and H > 11/03/2020 — Accordion — 8735 Views

BeefUp is a lightweight, responsive jQuery accordion plugin which allows you to toggle the visibility of Html elements with following features:

FAQ Accordion With Plus/Minus Icons — jquery-accordion.js

A small yet configurable FAQ accordion jQuery plugin that allows your visitors to expand and collapse frequently asked questions/answers with Plus/Minus icons.

Ultra Tiny Accordion Plugin For jQuery — Accordiom

Accordiom is a super tiny (

1.8kb minified) jQuery accordion plugin that features configurable animation speed, auto closing, callback functions, and much more.

Accordion-style Content Sl > 10/23/2020 — Slider — 228 Views

Yet another jQuery accordion slider plugin which allows the user to expand & collapse slides just like an accordion.

Tiny Unobtrusive Accordion Plugin — jQuery Monica.js

monica.js is a super tiny jQuery plugin that helps you create a minimal, clean, unobtrusive accordion interface with plain JavaScript/HTML/CSS.

Nested Sl > 10/15/2020 — Accordion — 126 Views

A super tiny and easy to use jQuery content toggle plugin to toggle the visibility of web contents just like an accordion.


jQuery Plugin For Collapsible Content with CSS3 Transitions — cssCollapse

cssCollapse is a really simple jQuery plugin to create a collapsible content box for showing / hiding html elements with smooth sliding animations based on CSS3 transitions.

Keyboard Accessible Accordion Plugin — jQuery wfAccordion

The jQuery wfAccordion plugin makes it easy to help developers create responsive, accessible accordions for sectioned content or FAQs.

Generate SEO-friendly Accordions From HTML Lists — accordable.js

accordable.js is a lightweight (

2kb minified) jQuery plugin to generates a responsive, semantic, SEO-friendly accordion component from a normal HTML unordered list.

Цукерберг рекомендует:  Создаем прокрутку списка записей по типу Твиттера без jQuery

Basic Accessible Accordion Plugin For jQuery

This is a simple, small jQuery plugin which enables you to create configurable, WAI-ARIA compliant accordion systems from plain, semantic html markups.

Dynamic Material Design Expansion Panel In jQuery — matd_expandlist.js

A dynamic Material Design Expansion Panel plugin which enables you to expand/collapse panels by clicking/tapping headers just like the accordion interface.

Minimalist Smooth Content Toggle Plugin For jQuery — CM Accordion

CM Accordion is an extremely lightweight (less than 1kb) yet configurable and semantic jQuery content toggle/accordion plugin for saving vertical space of the webpage.

jQuery Accordion Menu Plugin For Bootstrap 4/3 — metisMenu

metisMenu is a simple jQuery menu plugin for Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.

Easy Accessible Accordion Plugin For jQuery — aria-accordion

aria-accordion is a lightweight jQuery plugin which helps you create customizable, accessible accordions with support for auto focus, fade animation, Aria attributes/roles and keyboard interactions.

Create A Filterable Accordion List With jQuery

A jQuery based accordion-style data list/data grid that allows the user to filter list/grid items using anchor links.

jQuery Lightweight Accordion Plugin — Zebra_Accordion

Zebra_Accordion is a lightweight, cross-browser and highly customizable jQuery accordion plugin which is useful for better organizing larger groups of content.

Responsive Multipurpose Tabs & Accordion Plugin With jQuery

A responsive, multipurpose, ajax-enabled and mobile-friendly jQuery tabbed content plugin which automatically switches between tabs and accordion interfaces depending on the screen size.

Akordeon — Stylish jQuery Accordion Plugin

Stylish jQuery Accordion Plugin allows you to display HTML Elements (text, images. ) in an efficient accordion style.

Remember Toggle State In Accordion Using Cookies — jQuery Toggle

Toggle is a jQuery plugin for creating a simple accordion interface where the toggle state is saved in the cookies using the js-cookie library.

Simple Flexible Accordion Plugin — jQuery Lilo Accordion

Lilo Accordion is a simple, lightweight jQuery plugin to create a basic, responsive, customizable accordion UI while leaving the styling up to you.

Многоуровневый аккордеон

Плагин JQuery для создания аккордеона

На примере этого аккордеона сделана эта заметка.

Установка:

Добавляем на сайт библиотеку jQuery, CSS и JS файлы


class = «accordion-header default-open» > Заголовок 1

class = «f20 accordion-header» > Заголовок 1.1

class = «f20 accordion-header» > Заголовок 1.2

class = «f20 accordion-header» > Заголовок 1.3

class = «accordion-header default-open» > Заголовок 2

Атрибут data-multiple определяет открытые вкладки (только одна или все)

И подключаем скрипт:

Настройки:

  • Опубликовано: 23.01.2020
  • Рубрики: Меню и аккордеоны
  • Метки: jQuery, Responsive
  • 1534 просмотра

Смотрите также:

Гармошка из фотографий на jQuery

Плагин jQuery splits-slider Plugin для создания горизонтального аккордеона фотографий

Многоуровневое вертикальное меню

Многоуровневое вертикальное меню с выпадающим списком по клику на плюсик

Добавить комментарий:

Комментарии:

Почему у меня не работает? =\ создаю файл html, css и js с помощью бутстрап. после этого запускаю браузер, нажимаю меню и она не открывается. Что не так? посмотрел консоль не было ошибок.

Дайте ссылку.
Кстати у бутстрапа есть свой аккордеон же

Вот ссылка https://jsfiddle.net/k1unovrd/ это пример вам которые я создал файл html, css и js. Обратите внимание, что там прикрепил ссылка директорий setting.js — это настройка, jquery.js — подключении скрипт , test.js — у вас на статье спойлер «JS:». Далее посмотрите на результате, что оно никак не раскрывающий список. Никак.

на счет бутстрапа.. Да свой, но вот только тяжело писать код для многоуровненвый и путаниц. А у вас покороче и понятнее, чем бутстрап.

То что на jsfiddle у вас — у меня работает, если подключить jQuery 3, например.
Если у вас подключена первая (версии не помню сейчас от какой до какой), например, 1.12.4, как в вордпрессе, то возникает ошибка: TypeError: $ is not a function (это из консоли)

Чтобы полечить ее, замените $ на jQuery

Странно.. как заменить $ на jQuery? прошу привести пример (не обязательно подробный исход. код)

Автозаменой все $ на jQuery

Код из //setting.js поместите в:

А то что у вас ниже

Это лишнее, аккордион у вас подключается в setting с настройками.

Увы, не работает. Ладно, буду время — дольше изучу. А так спасибо за все;)


А как сделать чтобы по умолчание даже первая вкладка была закрыта ?

Спасибо дружище! И спасибо за твои посты! Ты супер!

25 бесплатных jQuery плагинов для создания табов и аккордеонов

We recommend upgrading to the latest Google Chrome or Firefox.

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

New pull request

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Downloading .

Want to be notified of new releases in WahaWaher/flextabs-js ?

Launching GitHub Desktop .

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop .

If nothing happens, download GitHub Desktop and try again.

Launching Xcode .

If nothing happens, download Xcode and try again.

Launching Visual Studio .

Permalink

Type Name Latest commit message Commit time
Failed to load latest commit information.
demo +CDN Mar 8, 2020
dist v2.0.0 Mar 7, 2020
.bowerrc v1.0.0 Aug 12, 2020
.gitignore v1.0.0 Aug 12, 2020
README.md +CDN Mar 8, 2020
bower.json v2.0.0 Mar 7, 2020
gulpfile.js v2.0.0 Mar 7, 2020
help.txt Правки в шаблоне Mar 7, 2020
package.json v2.0.0 Mar 7, 2020

jQuery FlexTabs Plugin 2.0.0

jQuery-плагин, для создания адаптивных вкладок (табы, аккордеон, спойлер)

  • Два режима отображения: tabs, accordion + (accordion с одной вкладкой в качестве спойлера)
  • Адаптивный режим. Трансформация табов в аккордеон и обратно (произвольно или при заданной ширине окна браузера)
  • Поддержка тем оформления (стили темы вынесены в отдельный файл)
  • Гибкая система методов/событий для программного управления состояниями
  • Пользовательская анимация при открытии/закрытии вкладок и смене режима


  1. Подключить скрипты и стили:
  1. Инициализировать плагин на группе элементов:
  1. Применить в HTML:

Другие варианты разметки см. Документацию

  • jQuery (тестировался на версии 3.3.1)

Решение проблем/багов плагина, а также замечания и пожелания в соответствующей теме

Copyright (c) 2020-2020 Sergey Kravchenko

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.

Best jQuery Accordion Plugins & Tutorials with Demo

Brilliant Animated Testimonials Page with JavaScript

An animated testimonials page made with GSAP’s TweenMax which will help you to impress your customers.

Foldable : Full Stack CSS3 powered jQuery Accordion

Foldable is the full stack CSS3 powered jQuery Accordion.

Responsive and device-ready with a lot of options to customize it that can be easily be part of your projects.

Fully animated open-close actions using built-in CSS3 animations with a smart auto fallback to jQuery animations for oldie browsers

Create Animated Skill Bar Using jQuery & CSS

Skill Bar is a modern way to give rating like if you want to compare mobile phones in terms of performance then skill bar is one of the best option to show performance rating in front of user there are number of ways to use this modern rating method skill bar.In this tutorial we will show you how to create animated skill bar using jQuery, HTML and CSS.You may also like animated progress bar using jquery.

CSS Vertical Navigation with Teaser

This article explains how to create vertical navigation menus without jquery or javascript. Yes, we are going to build vertical menus with CSS only. The navigation menu of a website plays a significant role in website’s usability and User Experience. Without menu navigation site is like content all but useless.

CSS Multi-Level Accordion Menu

Today’s resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements. However we included a version with jQuery as well, in case you prefer a subtle animation compared to the instant default effect.

Woco : jQuery Accordion plugin

A simple, user-friendly and lightweight jQuery accordion plugin with smooth animations powered by CSS3 transitions.It was based on the Minimal Accordion/Drawer Plugin with jQuery and CSS3 developed by alxndrwcz.

Responsive Accordion with jQuery & CSS3

“Responsive Accordion” is a component ready to use on mobile devices and desktop devices. It’s a fluid component and easy to use. It provides various skins, options and features for data organization. Ready for the Bootstrap Framework.


contentToggle : jQuery plugin for Content Toggling

A jQuery plugin for managing various kind of content toggling.This library help you create cross-platform and accessible (in the meaning of the W3C) content that can be shown and hidden with triggers.

Magic Accordion : jQuery Plugin

There are plenty of accordion plugins out there but I wanted a really simple one for the user (client) to create from a single WYSIWYG editor instead of creating numerous amounts of fields in said CMS.

All the user has to do is separate their content with a H2 tag (or what you define) and the accordion will magically be created!

jQuery Accordion Menu

“jQuery Accordion Menu” is a menu with accordion behavior.

Features:

  • Cross Browser
  • 6 color schemes
  • Unlimited submenus
  • Icons by Font Awesome
  • CSS3 effect
  • Easy to use and customize

Пишем аккордеон-плагин в 618 байт

Очень часто приходится видеть варианты элемента управления «аккордеон» на различных сайтах. В этой заметке я хотел бы предложить свой вариант, который кроме того, что обладает некоторыми оригинальными свойствами, еще и весит в minified-виде всего 618 байт. Заодно, я покажу как быстро написать простейший плагин для jQuery.

Забегая в перед скажу, что плагин тестировался в Firefox 3.0.3, Internet Explorer 7 и 8b2, Opera 9.52 и Chrome 0.3.154.9. Во всех других браузерах работоспособность гарантируется настолько насколько в них работает jQuery.

Для любопытных приведу пример того, что будет в итоге (ссылки и кнопки в примере не работают).

Постановка задачи

Создать плагин для jQuery, минимальный по объему, который бы на базе html-элемента «dl» строил элемент управления «аккордеон». Обязательным условием является вывод пояснения для неактивных элементов «аккордеона». Активный элемент аккордеона определяется по наличию класса «active» у соответствующего элемента dt. dt так же содержит заголовок элемента «аккордеона». Элемент пояснения span должен иметь класс «remark» и находится в dd. Основное тело каждого элемента «аккордеона» должно содержаться в div, который также должен быть в dd.

Решение

function Update(dl) <
$( «#» + dl. >» > dt:not(.active)» ).each( function () <
$( this ).css( «cursor» , «pointer» );
>);
$( «#» + dl. >» > dt.active» ).each( function () <
$( this ).css( «cursor» , «» );
>);

$( «#» + dl. >» > dd > div» ).hide();
$( «#» + dl. >» > dd > span.remark» ).show();

$( «#» + dl. >» > dt.active» ).next().children( «div» ).show(300);
$( «#» + dl. >» > dt.active» ).next().children( «span.remark» ).hide();
>

* This source code was highlighted with Source Code Highlighter .

Первые две операции обновляют вид указателей мыши при наведении на активный и неактивные элементы «аккордеона». Вторые две операции скрывают все содержимое «аккордеона» и показывают все примечания. Третьи две операции показывают с замедлением содержимое активной вкладки «аккордеона» и скрывают его примечание.

Далее напишем функционал, который будет выполняться в момент нажатия на вкладки «аккордеона»:

$( «#» + this . >» > dt» ).click( function () <
if ($( this ).has >»active» ))
return ; // выход если щелкнули по активному dt

$( «#» + dl. >» > dt» ).remove >»active» );
$( this ).add >»active» );

* This source code was highlighted with Source Code Highlighter .

Это «вырванный» кусок кода. Здесь $(«#» + this.id + » > dt») — это выборка всех вкладок нашего «аккордеона». Средствами jQuery устанавливается обработчик нажатия на вкладку, где в самом начале идет проверка куда кликнули, если на пассивный элемент, то производится выход. Далее, у всех вкладок удаляется класс «acitve», в кликнутой, наоборот, присваивается.

Сведем все вместе и напишем плагин к jQuery:

function Update(dl) <
$( «#» + dl. >» > dt:not(.active)» ).each( function () <
$( this ).css( «cursor» , «pointer» );
>);
$( «#» + dl. >» > dt.active» ).each( function () <
$( this ).css( «cursor» , «» );
>);

$( «#» + dl. >» > dd > div» ).hide();
$( «#» + dl. >» > dd > span.remark» ).show();

$( «#» + dl. >» > dt.active» ).next().children( «div» ).show(300);
$( «#» + dl. >» > dt.active» ).next().children( «span.remark» ).hide();
>

return this .each( function () <
var dl = $( this )[0];

$( «#» + this . >» > dt» ).click( function () <
if ($( this ).has >»active» ))
return ; // выход если щелкнули по активному dt


$( «#» + dl. >» > dt» ).remove >»active» );
$( this ).add >»active» );

* This source code was highlighted with Source Code Highlighter .

Мы расширяем jQuery нашей функцией «accordion», в которой для каждого заданного элемента произвдятся следующие шаги: получается экземпляр dl, обновляется состояние полученного dl, устанавливаются обработчики нажатия мышью для всех dt полученного dl.

Использование

script type =»text/javascript» >
$( document ).ready
(
function () <
$( «#LoginList» ).accordion();
>
);
script >

* This source code was highlighted with Source Code Highlighter .

Заключение

Представленный вариант — самый простейший, он не претендует ни на что кроме примера. Его можно улучшить добавив параметры, которые влияли бы на скорость отображения активного элемента, на стартовый номер вкладки «аккордеона». Кроме того, уверен, что можно улучшить и сам javascript-код.

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

Ссылка на плагин (1192 байта), minified-версия (618 байт).

UPD: благодаря оптимизации DmitryBaranovskiy размер minified-версии уменьшен до 508 байт, полной версии до 909 байт

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 535f3b9f3a56908d • Your IP : 188.64.174.135 • Performance & security by Cloudflare

JQuery Аккордеон

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

Плагин теперь JQuery UI часть автономной версии не будет обновляться. Текущая версия 1.6.

Для получения более подробной информации о аккордеона, обратитесь к API документации складной элемент панели (аккордеон виджетов) .

стандарт

Стандартный код выглядит следующим образом:

Ненумерованный список с якоря и вложенного списка

С помощью опции

Контейнер представляет собой перечень определений, название дт, содержание дд.

Создание вертикального меню аккордеон на jQuery

Дата публикации: 2012-08-20

От автора: в этом уроке мы познакомимся с одним из виджетов библиотеки jQuery UI под названием Accordion (Аккордеон). Чаще всего данный виджет используется для размещения в нем некой блочной связанной информации, что-то сродни с табами. Гораздо реже можно найти использование виджета в качестве меню.

Мы с Вами попытаемся создать функциональное, вертикальное меню аккордеон с помощью одноименного виджета jQuery, которое отлично будет смотреться на сайте.


JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Прежде всего определимся с версткой и стилями. Такой будет разметка меню:

Такими будут стили меню:

В итоге мы получим приблизительно следующую картину:

Дочерние категории не скрыты и меню выглядит чересчур громоздко. Вот в этом и заключается идея использования виджета — подпункты должны быть изначально скрыты и открываться должны только при клике на родительской категории. Это первая из задач урока.

Для ее решения подключим виджет. С библиотекой jQuery UI мы уже работали с Вами в ряде предыдущих уроков, а потому далее лишь несколько слов без детальных пояснений. На сайте виджета идем в меню Download, выбираем для скачивания только необходимый нам виджет Accordion, при необходимости выбираем из списка тему оформления виджета или конструируем собственную тему (поскольку оформление меню у нас есть, то я выберу пункт No Theme). После этого жмем кнопку Download и получаем в архиве запрошенное.

В полученном архиве из папки js скопируем 2 файла со скриптами в каталог нашего проекта (у нас это также каталог js). Подключим эти скрипты к документу:

Итак, мы подключили библиотеку jQuery и скрипт виджета. Теперь заставим работать все это. В документации к виджету Вы можете найти описание необходимой разметки, она должна быть следующей: родительские пункты должны быть по умолчанию заголовками H3, дочерние пункты должны быть размещены в блоке и все это вместе также должно быть заключено в блок.

В нашем случае текущая разметка меню также подойдет, у нас: родительские пункты являются заголовками H3, дочерние пункты помещены в список ul, который является блочным элементом, и все меню заключено также в список ul с идентификатором accordion.

Для подключения аккордеона достаточно обратиться к необходимому элементу (у нас это >

В итоге мы получим следующее:

Теперь все подпункты скрыты и меню стало компактным. Уже лучше. По клику на родительскую категорию дочерний блок красиво выезжает. По клику на любой другой пункт меню, кроме дочернего, раскрытый дочерний блок также красиво скрывается.

Но здесь есть несколько нюансов, которые необходимо учесть, чтобы получить действительно качественное меню:

При клике на раскрытую родительскую категорию дочерний блок не сворачивается… а хотелось бы.

При обновлении страницы не запоминается состояние меню, т.е. если мы имели открытый блок, к примеру, LG, то при обновлении страницы (при переходе на новую страницу) он вновь будет скрыт… это совсем нехорошо.

Итак, давайте их исправлять. Для этого обратимся к документации виджета и воспользуемся двумя свойствами метода accordion — active и collapsible. Второе свойство решит как раз первую проблему, заставив сворачиваться дочерний блок при клике по родителю. Ну а первое свойство отвечает за то, какой блок будет открыт при инициализации аккордеона:

Итак, указав значение свойства collapsible TRUE, мы решили первую проблему. Теперь ко второй. Здесь значением свойства active мы указали 2. Это значение является индексом элемента меню, который необходимо сделать активным (раскрыть). Нумерация начинается с нулевого индекса, и участвуют в ней все недочерние элементы меню. В нашем случае Alcatel имеет индекс 0, Ericsson — 1, LG — 2 и т.д. Таким образом, при инициализации открывается пункт меню LG.

Уже неплохо, но опять же, нет запоминания состояния меню. Если теперь мы раскроем другой пункт меню, то при обновлении опять будет открыт пункт меню LG. Логично, что нам необходимо реализовать следующий алгоритм для решения вопроса:

По клику на родительский (имеющий дочерние) пункт меню мы должны получить и запомнить его индекс.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Здесь нам помогут куки. Для решения задачи воспользуемся плагином jquery.cookie, который Вы можете найти в сети или в дополнительных материалах к уроку. Подключаем плагин:

Использование плагина в работе крайне просто. Фактически оно включает в себя всего 3 возможных действия:

Итак, давайте создадим куку с именем, к примеру, openItem, и запишем ее значением индекс родительского пункта меню при клике по нему:

Как видите, ничего сложного. Первым параметром метода cookie является имя создаваемой куки, вторым — ее значение. Итак, мы создали куку openItem при клике на родительский пункт меню. В браузерах Chrome или Opera Вы легко можете наблюдать это, кликая по родительским пунктам меню и обновляя страницу. Замечание! В браузере Chrome скрипт будет работать только на сервере.

Кука у нас есть, но пока что она не используется нами… исправим это:

Мы проверяем перед инициализацией меню есть ли что-то в куке openItem. Если условие выполняется, то значение куки мы получаем в одноименную переменную, при этом обязательно приводя значение к числовому типу (по умолчанию тип строковый). Дело в том, что значение опции active обязательно должно быть числового типа.

Отлично! Теперь состояние меню запоминается. При обновлении страницы открытый пункт меню остается открытым. Но если теперь кликнуть по пункту без дочерних элементов — открытый пункт свернется, так и должно быть… но при обновлении он опять разворачивается. Это потому, что кука есть и никуда не пропадает. Исправим сей нюанс, удаляя куку по клику на самостоятельный пункт меню:

Вот теперь все отлично и работает практически так, как нам и хотелось… почему практически? Сейчас в меню первым пунктом идет самостоятельный пункт. Давайте сделаем первым пунктом родительский пункт, например LG.

И что мы видим? После обновления страницы пункт LG стал активным. Это при том, что значением куки мы видим false:

Как же так? Если в условие приходит false, то оно не должно выполняться. На самом деле это не булево FALSE, а строка. Поэтому, чтобы все работало, немного допишем условие и заодно создадим изначально переменную openItem с каким-либо значением, отличным от натурального числа и нуля:

Теперь осталось решить несколько последних нюансов. Попробуйте сейчас кликнуть по дочернему элементу. После клика по нему кука удаляется, соответственно, состояние меню не запоминается. Происходит так потому, что дочерние элементы являются также элементами списка, как и самостоятельные пункты меню. Давайте немного изменим отбор элементов, для которых будем отслеживать событие клика. Выберем только прямых потомков блока с идентификатором accordion:

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

Решить эту проблему можно следующим образом – получим ссылку элемента, по которому был клик, и воспользуемся объектом window.location для перехода по этой ссылке:

И, наконец, добавим еще пару опций в метод accordion():

Опция header позволяет явно указать на элемент, который будет заголовком секций. Эту опцию мы указали для решения возможных проблем с IE, в 7-ой версии которого я наблюдал проблемы с аккордеоном. После указания этой опции, проблемы решились.

Вторая опция – autoHeigth со значением false – позволяет решить проблему с высотой открывающихся блоков. По умолчанию значение этой опции выставлено в true, что задает одинаковую высоту для всех скрытых блоков. Значение высоты берется из расчета максимальной высоты блока, т.е. если у одного блока, к примеру, будет 5 пунктов и высота 100 пикселей, то второй блок со всего 1 пунктом будет также иметь высоту 100 пикселей. Появится пустое место у второго блока, что не очень хорошо.

Вот теперь действительно все. Наше вертикальное меню аккордеон, работает так, как и было задумано. В итоге мы получили меню, которое идеально подойдет для категорий интернет-магазина или просто для сайта, где есть разделы с подкатегориями. При этом наше меню еще и «умеет» запоминать свое состояние.

На этом урок закончен. Удачи Вам и до новых встреч!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих