Skip to content

Создаем аккордеон на jQuery

Привет, друзья! Сегодня мы разберем скрипт меню-аккордеона, в котором скрытое меню будет раскрываться при клике по иконке открытия, а не по клику на сам элемент меню.

Предпосылки

Вдохновение на создание этого аккордеона мне дал один из читателей моего сайта. Андрей оставил следующий комментарий к уроку по созданию аккордеона на jQuery UI:

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

Я пообещал опубликовать другой скрипт. Думаю он пригодится не только Андрею. Посмотрите демонстрацию и скачайте исходники.

HTML

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

<ul id="menu">
<li><a href="#">Главная</a></li>
<li>
<a href="#">CMS</a>
<ul>
<li><a href="#">Joomla!</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Drupal</a></li>
</ul>
</li>
<li>
<a href="#">Веб-программирование</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li>
<a href="#">Развлечения</a>
<ul>
<li><a href="#">Sony Playstation 3</a></li>
<li><a href="#">XBOX 360</a></li>
<li><a href="#">Nintendo</a></li>
</ul>
</li>
<li><a href="#">Блогосфера</a></li>
</ul>

Как видите простое меню. Но некоторые могут спросить, а где же иконки для открывания скрытых списков? Терпение, друзья мои. Их мы добавим через jQuery.

CSS

Вот стили для нашего меню. Я использовал минимум картинок (всего 2 — для иконки):

ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}

ul#menu a {
display: block;
text-decoration: none;
}

ul#menu li {
margin-top: 1px;
}

ul#menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}

ul#menu li a:hover {
background: #000;
}

ul#menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul#menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
/*Стили иконки*/
ul#menu li span {
width: 35px;
height: 35px;
display: block;
float: right;
background: #000 url(arr-left.png) no-repeat center;
cursor: pointer;
}
ul#menu li span.collapse{
background-image: url(arr-down.png);
}

В последних строках у нас находятся стили для иконки, но пока у нас ее нет! Давайте это исправим и создадим файл accordion.js для работы аккордеона.

jQuery

Этим скриптом мы заставим меню работать, как нам надо.

$(document).ready(function() {
$('#menu ul').parent().addClass('parent');
$('#menu ul').hide();
$('#menu > li.parent > a').before('<span title="Скрыть / Расскрыть"></span>');
$('#menu > li.parent > span').click(function() {
$(this).toggleClass('collapse')
$(this).next().next().slideToggle('normal');
});
});
  • Прямым родителям скрытых списков добавляем класс .parent (строка 2)
  • Скрываем эти вложенные списки (строка 3)
  • Перед ссылками в элементах списка с классом .parent добавляем нашу иконку на строке 4 (я дополнительно добавил ей атрибут title, чтобы пользователь понимал, что при нажатии на ней откроется вложенный список).
  • Строки 5-8 отвечает за скрытие/раскрытие вложенного списка при клике по иконке. А по клику на ссылку будет происходить переход по адресу этой ссылки. Как все и задумывалось!

Теперь не забываем подключить все файлы в область head нашего документа.

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="accordeon.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

jQuery я подключил от Яндекс CDN. Файл style.css — таблица стилей, которую мы создали в пункте CSS.

На этом у меня все. Спасибо за внимание!