Вывод элементов 3, 4, 5 уровня меню из приложения "управление меню" Есть решение

В приложение "управление меню" есть подсказка как выводить меню

<nav class="menu">
{* цикл по элементам верхнего уровня *}
{foreach $items as $item}
<div class="menu-item">

{* отрисовка ссылки *}
<a href="{$item.url}">{$item.name}</a>

{* у элемента могут быть вложенные элементы *}
{if !empty($item.childs)}
<div class="menu-item-childs">

{* цикл по элементам второго уровня *}
{foreach $item.childs as $child}
<div class="menu-item-child">

{* отрисовка ссылки *}
<a href="{$item.url}">{$item.name}</a>

{* далее могут быть ещё вложенные элементы: {$child.childs} и т.д. *}
</div>
{/foreach}
</div>
{/if}
</div>
{/foreach}
</nav>


И написано про вложенные элементы {$child.childs} , а что с ним делать?

Думал так сработает , т.е заменит $item.childs на $child.childs, но не сработало

{foreach $child.childs as $child}
<div class="menu-item-child">

{* отрисовка ссылки *}
<a href="{$child.url}">{$child.name}</a>


</div>
{/foreach}
</div>

Подскажите , как правильно?

4 ответа

  • 1
    Eugen Nichikov Партнер-разработчик 23 августа 2021 16:59 # Решение

    В изначальном коде опечатка. Вот так:

    <nav class="menu">
    	{* цикл по элементам верхнего уровня *}
    	{foreach $items as $item}
    		<div class="menu-item">
    
    		{* отрисовка ссылки *}
    		<a href="{$item.url}">{$item.name}</a>
    
    		{* у элемента могут быть вложенные элементы *}
    		{if !empty($item.childs)}
    			<div class="menu-item-childs">
    
    				{* цикл по элементам второго уровня *}
    				{foreach $item.childs as $child}
    					<div class="menu-item-child">
    
    					{* отрисовка ссылки *}
    					<a href="{$child.url}">{$child.name}</a>
    
    					{* далее могут быть ещё вложенные элементы: {$child.childs} и т.д. *}
    				</div>
    				{/foreach}
    			</div>
    		{/if}
    		</div>
    	{/foreach}
    </nav>

    • +1
      Бэтман Бэтман 24 августа 2021 08:05 #

      Спасибо за ответ. 

      А что дальше писать для вывода третьего уровня, 4  го уровня?

      • +2

        Ну дальше писать циклы. Пример:

        {* цикл по элементам второго уровня *}
        {foreach $item.childs as $child}
        		<div class="menu-item-child">
        
        		{* отрисовка ссылки *}
        		<a href="{$child.url}">{$child.name}</a>
        
        		
        		{* цикл по элементам третьего уровня *}
        		{foreach $child.childs as $subchild}
        				<div class="menu-item-subchild">
        
        				{* отрисовка ссылки *}
        				<a href="{$subchild.url}">{$subchild.name}</a>
        
        				{* далее могут быть ещё вложенные элементы: {$subchild.childs} и т.д. *}
        		</div>
        		{/foreach}
        </div>
        {/foreach}

        Но если вложенных уровней может быть много, лучше либо рекурсивную функцию вызывать, либо воспользоваться wa_print_tree всё-таки.

        Если не устраивает структура последней, можно по верхнему уровню пройтись в цикле, а дальше уже функцией. Типа такого

        <nav class="menu">
        	{* цикл по элементам верхнего уровня *}
        	{foreach $items as $item}
        		<div class="menu-item">
        
        			{* отрисовка ссылки *}
        			<a href="{$item.url}">{$item.name}</a>
        
        			{* у элемента могут быть вложенные элементы *}
        			{if !empty($item.childs)}
        				{wa_print_tree tree=$item.childs elem='<a href=":url">:name</a>'}
        			{/if}
        		</div>
        	{/foreach}
        </nav>

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите