Tony Опубликовано 31 июля, 2013 Жалоба Поделиться Опубликовано 31 июля, 2013 Имеется стандартный код, который выводит меню в sidebar. Меню 2-х уровнево. На данный момент сильно разрослось и стал вопрос об его оптимизации. Сейчас хочу средствами CSS сделать его сворачиваемым, не создавая скриптовый аккордеон. Смысл таков: чем больше углубляешься по иерархии, тем больше конкретная ветка меню будет раскрываться (остальные ветки остаются закрытыми). Реализация в принципе проста. Всем дочерним элементам активной категории делаю display:none, а потом по мере продвижения вглубь, добавляю класс active и отображаю их. НО, грабли заключаются в том, что класс active скачет по иерархии. То есть, если мы находимся на первом уровне меню, то он также на первом уровне. Если переходим на второй уровень, то класс active также переходит на второй (пропадает с первого). Таким образом, второму уровню присваивается display:blcck, а первый становится обратно display:none и выходит, что на втором уровне не отображается ничего. Наметил пару способов устранения этой штуки: 1. Обратится все тем же jquery к родительскому элементу, и отобразить его. Но тут есть загвоздка: пока дерево DOM не отстроилось скрипт не может обратится к нужному элементу, поэтому сначала загружается страница, а потом срабатывает скрипт. Получается некрасивый, заметный глазу, скачок менюшки. 2. Каждому товару присвоить обе категории (первого уровня и второго). Да, это решает полностью проблему, потому что теперь класс active будет на обоих уровнях меню, но красотой и логикой этот способ не блещет. Может когда товаров мало и вложенность небольшая можно такую штуку заюзать. но как универсальное решение не катит. Поэтому собственно сам вопрос: Можно ли как-то через условные теги сделать так, чтобы класс active добавлялся всем дочернимэлементам активной категории, начиная от первого уровня? Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 31 июля, 2013 Жалоба Поделиться Опубликовано 31 июля, 2013 {if in_array($category->id, $c->children)} Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 31 июля, 2013 Жалоба Поделиться Опубликовано 31 июля, 2013 А не проще было бы поискать на форуме решение? <!-- Меню каталога --> <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 Опубликовано 7 ноября, 2018 Жалоба Поделиться Опубликовано 7 ноября, 2018 А не проще было бы поискать на форуме решение? <!-- Меню каталога --> <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 на ссылку.. Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.