Как реализовать меню на js?

Question

[Николай]

Мне нужно реализовать боковое меню (меню с категориями товаров) как на этом сайте (lust-ra.ru) но проблема у меня с JS. В моей CMS, выводится категории и подкатегории:

<ul class="menu-header">
     <li><a href="#link">Родительская категория 1</a>
           <ul>
                   <li><a href="#link">Подкатегория</a></li>
                   <li><a href="#link">Подкатегория</a></li>
                   <li><a href="#link">Подкатегория</a></li>
          </ul>
</li>
 <li><a href="#link">Родительская категория 2</a>
           <ul>
                   <li><a href="#link">Подкатегория</a></li>
                   <li><a href="#link">Подкатегория</a></li>
                   <li><a href="#link">Подкатегория</a></li>
          </ul>
</li>
 <li><a href="#link">Родительская категория 3</a>
           <ul>
                   <li><a href="#link">Подкатегория</a></li>
                   <li><a href="#link">Подкатегория</a></li>
                   <li><a href="#link">Подкатегория</a></li>
          </ul>
</li>
</ul>

Мне нужно сделать аккардеон, чтобы при нажатии на родительскую категория, открывалась родительская категория и раскрывался список с подкатегориями относящимися к данной категории и чтобы jquery.cookie.js запоминал выбор. Дописать дополнительные классы в структуру не используя js нельзя, да и обходимости я думаю нет (для субкатегорий). Помогите реализовать с меня чашка кофе.

Answer 1

[Дмитрий Беляев]

Написал для Вас плагин, разбирайтесь, пользуйтесь:

;(function(fab) {
	//UMD definition
	if(define && define.amd) {
		//for AMD
		define(['jquery'], fab);
	} else if(module && module.exports && require) {
		//for CommonJS
		module.exports = fab(require('jquery'));
	} else {
		//no module system
		fab(jQuery);
	}
}(function($) {
	$.fn.menuAccordionCookie = function(cookieName) {
		//jQuery может найти по селектору несколько элементов, применяем ко всем
		$(this).each(function() {
			var $ul = $(this); //самый верхний ul
			var cookie = JSON.parse($.cookie(cookieName) || '{}'); //получаем куку и парсим
			//это хелпер для сохранения куки
			function saveCookie(id, value) {
				if(value) {
					cookie[id] = 1;
				} else {
					delete cookie[id];
				}
				$.cookie(cookieName, JSON.stringify(cookie));
			}
			//получаем все <li> которые являются прямыми потомками нашего <ul> и перебираем их
			$ul.children('li').each(function(id) {
				var $li = $(this);
				var $childUl = $li.children('ul'); //Дочерний <ul>
				var $a = $li.children('a'); // <a>
				if(!$childUl.length) {
					//если в li нет ul то ничего с ним не делаем
					return;
				}
				if(!cookie[id]) {
					//Прячем все для кого не запомнено, что они показаны
					$childUl.hide();
				}
				//click по ссылке
				$a.on('click', function() {
					if(cookie[id]) {
						saveCookie(id, false);
						$childUl.hide();
					} else {
						saveCookie(id, true);
						$childUl.show();
					}
				});
			});
		});
	};
}));

Использование:

$(function() {
    $('.menu-header').menuAccordionCookie('my_accorion_menu');
});

Comments

[Николай]

Почему-то никаках изменений после вставки и подключения. Код добавил после подключения jQuery и jquery.cookie.js, ниже подключил (использование). В css пробывал убирать .menu-header li ul {display: none;}, но все равно не работает.

[Николай]

Оставил заявку на установку commonjs. Может это лечение)

[Дмитрий Беляев]

У вас используется какая либо модульная система на сайте?

[Николай]

Дмитрий Беляев: к сожалению я думаю нет, но я уточню у разработчика.

[Дмитрий Беляев]

Николай Мещеряков: Я уже по привычке пишу все, что для других в UMD стиле, если нет модульной системы уберите модульную обертку, оставьте только тело модуля

[Николай]

Дмитрий Беляев: можете ткнуть носом?

[Дмитрий Беляев]

Николай Мещеряков: вот это:
//UMD definition
if(define && define.amd) {
//for AMD
define(['jquery'], fab);
} else if(module && module.exports && require) {
//for CommonJS
module.exports = fab(require('jquery'));
} else {
//no module system
fab(jQuery);
}
замените на
fab(jQuery);