Ссылки

Поиск

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Блок новостей в виде блога 2 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>
На сайте регистрация пользователей спамом 3 >>

Когда тебя предали — это все равно, что руки сломали. Простить можно, но вот обнять уже не получится.

RSS фиды

RSS Файлы
RSS Новости
RSS Форум

Статьи → Статьи → Разработка сайтов → Простой аккордеон на 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
Дата 2012-10-03 12:04:46

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

Вы не залогинены!

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