Делаем разворачивающиеся меню в jQuery
Автор: SysaninАпр 24
Расскажу как можно легко сделать с помощью jQuey разворачивающиеся меню. Причем нам не понадобиться колдовать с идами или классами элементов меню (присваивать им уникальные индификаторы и так далее). Обо всем позаботиться jQuery.
Собственно мы хотим, что бы у нас было несколько пунктов меню с некоторым текстом в качестве пояснения. При нажатии на пункте меню, нужно что бы текст разворачивался. При повторном соответственно сворачивался.
Для примера будет использовать следующий html код:
<dl>
<dt><a class="menu-title-disactiv">Пункт 1</a></dt>
<dd>Пояснение для пункта 1</dd>
<dt><a class="menu-title-disactiv">Пункт 2</a></dt>
<dd>Пояснение для пункта 2</dd>
<dt><a class="menu-title-disactiv">Пункт 3</a></dt>
<dd>Пояснение для пункта 3</dd>
</dl>
</div>
А вот обработчик на JS (конечно же нужно будет подключить еще библиотеку с jQuery):
//определяем что нам делать: скрыть или показать пояснение
if($(obj).attr('class') == 'menu-title-disactiv'){
//меняем класс у ссылки, что бы потом знать
//показывать или убирать описание, а так же можно изменять
//оформление ссылки в зависимости от класса
$(obj).attr('class', 'menu-title-activ')
//поднимаемся на уровень выше ссылки и
//ищем след элемент, т.е. тег dd
$(obj).parent().next().show('slow');
}else{
$(obj).attr('class', 'menu-title-disactiv')
//поднимаемся на уровень выше ссылки и
//ищем след элемент, т.е. тег dd
$(obj).parent().next().hide('slow');
}
}
//после загрузки документа выполняем действия
$(document).ready(function(){
//на все ссылки заключенные в тег dt, класса menu
//вешаем обработчик события "onclick"
//при нажатии кнопки он вызовет нашу функцию
//и передаст в неё вызвавший объект
$('.menu dt a').bind('click', function(){
menu_faq_select(this);
});
//прячем все пояснения к меню
//если js у юзера отключен, то пояснения
//останутся видимыми
$('.menu dd').hide();
})
3 коммент.
Пишет Виталий | дата: 22 апреля 2010 в 18:39
а где пример?
Пишет Роман | дата: 23 июля 2010 в 14:53
Хочу на свой сайт веб дизайнера засунуть такой скрипт. Только не будет ли глючить на joomla
Пишет Sysanin | дата: 26 июля 2010 в 9:26
Чего ж ему там глючить? Даже, если джомла использует конструкцию $(document).ready() от jQuery, то он все равно обработает оба события.