РазделыСтатьиРазработка сайтов → Простой аккордеон на jQuery №1

Написать подобный скрипт проще на jQuery (отдельно взятые плагины — зло для такого простого скрипта), но есть небольшое замечание.
Мне например не нравится, что на большинстве аккордеонов нужно кликать — ведь этот пункт может оказаться ссылкой (а скорее даже должен быть).
Поэтому я реализовал подобное не кликом, а наведением мыши.
HTML:
Код:

<ul> <li class="first_child" >

<
a  href="#">Матрицы ноутбуков</a>  
<
ul> <li> <a  href="#">Матрицы 7"-9"</a>  </li> </ul>
<
ul> <li> <a  href="#" title="">Матрицы 10"-14"</a>  </li> </ul>
<
ul> <li> <a  href="#" title="">Матрицы 15"-17"</a>  </li> </ul> </li>
</
ul>
<
ul> <li class="first_child" >
<
a  href="#">Клавиатуры ноутбуков</a>  
<
ul> <li> <a  href="#">Клавиатуры для Asus</a>  </li> </ul>
<
ul> <li> <a  href="#" title="звоните и уточняйте">много и разных в наличии</a>  </li> </ul> </li>
</
ul>
<
ul> <li class="first_child" >
<
a  href="#">Блок питания ноутбука</a>  
<
ul> <li> <a  href="#">блок питания Asus</a>  </li> </ul>
<
ul> <li> <a  href="#">блоки питания Acer</a>  </li> </ul>
<
ul> <li> <a  href="#">блок питания HP</a>  </li> </ul> </li>
</
ul>
<
ul> <li class="first_child" >
<
a  href="#">HDD ноутбуков</a>  
<
ul> <li> <a  href="#">500G</a>  </li> </ul>
<
ul> <li> <a  href="#">750G</a>  </li> </ul> </li>
</
ul>
<
script type='text/javascript'>
$(
document).ready(function(){
$(
'.first_child').children('ul').hide();
$(
'.first_child').hover(function(){
$(
this).children('ul:not(:animated)').slideToggle('slow');    
});
});
</script>
Как работает:
— Корневому <ul> присваиваете класс "first_child", прописываете в конце 6 строчек кода.
— Код: переключать высоту у потомков <ul> класса "first_child" при наведении курсора мыши.
— Чтобы анимация не "дергалась", высота переключается только у тех потомков, которые сейчас не двигаются.

Пример (наведите мышку на список):



Дополнительно:
— Вместо 'slow' можно поэкспериментировать с анимацией, задав любое значение в миллисекундах.
— Если хотите выделить чем-то главные ссылки, нужно присваивать дополнительно класс ссылке <a>, следующей сразу за <li class="first_child" >
— Если нужно-таки поведение "кликай", а не "наведи на ссылку", просто меняем $('.first_child').hover(function() на $('.first_child').click(function()


Разумеется, jQuery должен быть подключен на странице до начала манипуляций;)

Почитать ещё:
Простой аккордеон на jQuery №2
03.10.2012 11:04 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.