Раскрывающееся меню на jquery с cookie

Подключаем jquery и jquery.cookie.js

Код скрипта:

$(document).ready(function() {
	$('.smenu ul ul').each(function(i) { 
		if ($.cookie('submenuMark-' + i)) { 
			$(this).show(); 
		}else {
			$(this).hide(); 
		}
		$(this).prev().click(function() { 
			var this_i = $('.smenu ul ul').index($(this).next()); 
			if ($(this).next().css('display') == 'none') {
				$(this).next().slideDown(200, function () { 
					cookieSet(this_i);
				});
			}else {
				$(this).next().slideUp(200, function () { 
					cookieDel(this_i);
					$(this).find('ul').each(function() {
						$(this).hide(0, cookieDel($('.smenu ul ul').index($(this))));
					});
				});
			}
		return false;
		});
	});
});
function cookieSet(index) {
	$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
}
function cookieDel(index) {
	$.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); 
}

Вариант с добавлением классов:

$(document).ready(function() {
	$('.smenu ul ul').each(function(i) { // Check each submenu:
		if ($.cookie('submenuMark-' + i)) {  // If index of submenu is marked in cookies:
			$(this).show().prev().removeClass('collapsed').addClass('expanded'); // Show it (add apropriate classes)
		}else {
			$(this).hide().prev().removeClass('expanded').addClass('collapsed'); // Hide it
		}
		$(this).prev().addClass('collapsible').click(function() { // Attach an event listener
			var this_i = $('.smenu ul ul').index($(this).next()); // The index of the submenu of the clicked link
			if ($(this).next().css('display') == 'none') {
				$(this).next().slideDown(200, function () { // Show submenu:
					$(this).prev().removeClass('collapsed').addClass('expanded');
					cookieSet(this_i);
				});
			}else {
				$(this).next().slideUp(200, function () { // Hide submenu:
					$(this).prev().removeClass('expanded').addClass('collapsed');
					cookieDel(this_i);
					$(this).find('ul').each(function() {
						$(this).hide(0, cookieDel($('.smenu ul ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed');
					});
				});
			}
		return false; // Prohibit the browser to follow the link address
		});
	});
});
function cookieSet(index) {
	$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); // Set mark to cookie (submenu is shown):
}
function cookieDel(index) {
	$.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); // Delete mark from cookie (submenu is hidden):
}

Одно меню открывается, а другое при этом закрывается:

$(document).ready(function() {
	$('.smenu ul ul').each(function(i) { 
		if ($.cookie('submenuMark-' + i)) { 
			$(this).show(); 
		}else {
			$(this).hide(); 
		}
		$(this).prev().click(function() { 
			var this_i = $('.smenu ul ul').index($(this).next()); 

			if ($(this).next().css('display') == 'none') {

				$('.smenu ul ul').each(function() {
					$(this).slideUp(200, cookieDel($('.smenu ul ul').index($(this))));
				});

				$(this).next().slideDown(200, function () { 
					cookieSet(this_i);
				});
			}else {
				$(this).next().slideUp(200, function () { 
					cookieDel(this_i);
				});
			}
		return false;
		});
	});
});
function cookieSet(index) {
	$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
}
function cookieDel(index) {
	$.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); 
}

Одно меню открывается, а другое при этом закрывается, если пройти по пункту без вложенного, то открытое закроется:

$(document).ready(function() {

	$('.smenu>ul>li>a').click(function() { 
		$('.smenu ul ul').each(function() {
			$(this).slideUp(200, cookieDel($('.smenu ul ul').index($(this))));
		});
	});

	$('.smenu ul ul').each(function(i) { 
		if ($.cookie('submenuMark-' + i)) { 
			$(this).show(); 
		}else {
			$(this).hide(); 
		}


		$(this).prev().click(function() { 
			var this_i = $('.smenu ul ul').index($(this).next()); 

			if ($(this).next().css('display') == 'none') {

				$('.smenu ul ul').each(function() {
					$(this).slideUp(200, cookieDel($('.smenu ul ul').index($(this))));
				});

				$(this).next().slideDown(200, function () { 
					cookieSet(this_i);
				});
			}else {
				$(this).next().slideUp(200, function () { 
					cookieDel(this_i);
				});
			}
		return false;
		});
	});
});
function cookieSet(index) {
	$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
}
function cookieDel(index) {
	$.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); 
}
Запись опубликована в рубрике JavaScript с метками , . Добавьте в закладки постоянную ссылку.

4 комментария: Раскрывающееся меню на jquery с cookie

  1. Саша говорит:

    Добрый вечер! А что нужно изменить в последнем варианте кода, чтобы при обновлении страницы все меню закрывались?

  2. Денис говорит:

    ищу пример функционала( вертикальное меню с субменю) и нужно чтобы при переходе по субменю при перезагрузке страницы оно оставалось открытым
    данный вариант подойдет?

  3. Ян говорит:

    хорошо было бы если бы ещё  и демо можно было где нибудь глянуть

  4. Vladimir говорит:

    Скрипт я вижу, а где разметка со стилями?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *