Показване/Скриване на менюта с jQuery

Здравейте, реших да Ви покажа едно примерче, за разгъващи се менюта, с възможност за помнене (или иначе казано, ползване на бисквитки) в JavaScript. За да е по-атрактивно, ще използваме jQuery SlideToggle функцията.

Като за начало, ще трябва да инклуднете jQuery и плъгинаjQuery Cookie
[code lang=”html4strict”]

[/code]
И естествено, самата JavaScript функция, която да ни показва/скрива менютата.

[code lang="javascript"] $(document).ready(function(){ // Първо прекарваме всички линкове, съдържащи в себе си class="toggle" $("a[class='toggle']").each(function(){ // правим една проверка, дали има записана бисквитка, с име === (тоест, самото menu1 (примерно)) if ($.cookie($(this).parents().next().attr('class'))) { // ако намери съвпадение, скриваме списъка, и заместваме "-" с "+" в линка $(this).parents().next().hide(); $(this).html('+'); } }); // тук засичаме когато сме кликнали на линкът, за да покаже/скрие менюто $("a.toggle").click(function() { // вземаме името на класа от списъка за по-лесно var menu = $(this).parents().next().attr('class'); // правим проверката дали трябва да се разгъне, или да се свие if ($(this).html() == '-') { // тук трябва да се скрие, затова скриваме го, добавяме бисквитка, с името на класа на списъка и променяме "-" с "+" в линка $('.' + menu).slideToggle(500); $.cookie(menu,'expand', { expires: 30 }); $(this).html('+'); } // ако пък трябва да се покаже, работим по-горната логика, само че този път трием бисквитката и променяме "+" с "-" else { $('.' + menu).slideToggle(500); $.cookie(menu,null); $(this).html('-'); } }); });

[/code]
Демото, може да видите (и свалите евентуално) оттук .
Пробвано е и работи под всички браузъри.

Възможно е, ако имате друга структура на менютата, кодът по-горе да не ви сработи, затова силно Ви препоръчвам да прочетете за Selectors