Меню и класс active

[Tony]

Имеется стандартный код, который выводит меню в sidebar.

 

Меню 2-х уровнево. На данный момент сильно разрослось и стал вопрос об его оптимизации.

 

Сейчас хочу средствами CSS сделать его сворачиваемым, не создавая скриптовый аккордеон.

 

Смысл таков: чем больше углубляешься по иерархии, тем больше конкретная ветка меню будет раскрываться (остальные ветки остаются закрытыми).

 

Реализация в принципе проста. Всем дочерним элементам активной категории делаю display:none, а потом по мере продвижения вглубь, добавляю класс active и отображаю их.

 

НО, грабли заключаются в том, что класс active скачет по иерархии. То есть, если мы находимся на первом уровне меню, то он также на первом уровне. Если переходим на второй уровень, то класс active также переходит на второй (пропадает с первого).

 

Таким образом, второму уровню присваивается display:blcck, а первый становится обратно display:none и выходит, что на втором уровне не отображается ничего.

 

Наметил пару способов устранения этой штуки:

 

1. Обратится все тем же jquery  к родительскому элементу, и отобразить его. Но тут есть загвоздка: пока дерево DOM не отстроилось скрипт не может обратится к нужному элементу, поэтому сначала загружается страница, а потом срабатывает скрипт. Получается некрасивый, заметный глазу, скачок менюшки.

 

2. Каждому товару присвоить обе категории (первого уровня и второго). Да, это решает полностью проблему, потому что теперь класс active будет на обоих уровнях меню, но красотой и логикой этот способ не блещет. Может когда товаров мало и вложенность небольшая можно такую штуку заюзать. но как универсальное решение не катит.

 

Поэтому собственно сам вопрос:

 

Можно ли как-то через условные теги сделать так, чтобы класс active добавлялся всем дочерним
элементам активной категории, начиная от первого уровня?

[Kosjak76]

{if in_array($category->id, $c->children)}

[Kpoxa]

А не проще было бы поискать на форуме решение?

			<!-- Меню каталога -->
			<div id="catalog_menu">
					
			{* Рекурсивная функция вывода дерева категорий *}
			{function name=categories_tree}
			{if $categories}
			<ul>
			{foreach $categories as $c}
				{* Показываем только видимые категории *}
				{if $c->visible}
					<li>
						{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
						<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
                                           {if in_array($category->id, $c->children)}
						{categories_tree categories=$c->subcategories}
                                           {/if}
					</li>
				{/if}
			{/foreach}
			</ul>
			{/if}
			{/function}
			{categories_tree categories=$categories}
			</div>
			<!-- Меню каталога (The End)-->		

Пока писал, уже ответили 

[Consult]

А не проще было бы поискать на форуме решение?

			<!-- Меню каталога -->
			<div id="catalog_menu">
					
			{* Рекурсивная функция вывода дерева категорий *}
			{function name=categories_tree}
			{if $categories}
			<ul>
			{foreach $categories as $c}
				{* Показываем только видимые категории *}
				{if $c->visible}
					<li>
						{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
						<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
                                           {if in_array($category->id, $c->children)}
						{categories_tree categories=$c->subcategories}
                                           {/if}
					</li>
				{/if}
			{/foreach}
			</ul>
			{/if}
			{/function}
			{categories_tree categories=$categories}
			</div>
			<!-- Меню каталога (The End)-->		

Пока писал, уже ответили 

Помогите, пожалуйста.. суть проблемы:

сделал разворачивание по клику на jquery, осталось сделать, чтобы при переходе в подраздел меню оставалось открытым. 

 

Если взять кусок 

						<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a>
                                           {if in_array($category->id, $c->children)}
						{categories_tree categories=$c->subcategories}
                                           {/if}

то из-за условия {if in_array($category->id, $c->children)} он убирает у других li дочерние ul из-за чего меню мое не раскрывается (потому что сделана проверка на наличие дочерних ul у li), когда находишься в активном разделе.. а если условие убираю, то не навешивается selected на ссылку..