Ссылки

Поиск

 
Новости, Статьи
Форум
Файлы

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

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

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

Гадания на таро 0 >>
Блок новостей в виде блога 1 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>

Последние статьи

Сайт для фирмы-изготовителя натяжных потолков 0
Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Удаление родителя текущего элемента на jQuery 0
Простой аккордеон на jQuery №3 0

Раскрутить свой сайт можно и самостоятельно.

RSS фиды

RSS Статьи
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
03.10.2012 11:04 Автор/источник: Den1xxx

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

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

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