Обход дерева dropdown menu

138

27 марта 2021, 07:50

Есть стандартное генерируемое меню типа dropdown, допустим на 3 уровня.

<ul>
    <li>
        <a>Ссылка 1</a>
        <ul>
            <li>
                <a>Ссылка 2</a>
                <ul>
                    <li>
                    <a>Ссылка 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Кажется так написал. В каждой ul>li содержится ссылка и следующая ul>li, если это не последний уровень. Например мне нужно поставить маркеры на все , которые не являются последним уровнем, то есть по соседству с которой есть еще ul>li. Как это реализовать? Рекурсией?

Answer 1

Мб оффтоп, но если вам только стрелки расставить надо, то поищите решения основанные на CSS. Я в нем, правда, не специалист, но возможно, нечто подобное, или прочие варианты.

li > a::after { 
   content: '\2bc6'; 
   color: red; 
} 
 
li > a:only-child::after { 
 content: ''; 
}

<ul> 
    <li> 
        <a>Ссылка 1</a> 
        <ul> 
            <li> 
                <a>Ссылка 2</a> 
                <ul> 
                    <li> 
                    <a>Ссылка 3</a> 
                    </li> 
                </ul> 
            </li> 
        </ul> 
    </li> 
</ul>

Либо с помошью jquery (можете портировать в js), фактически рекурсия то тут не требуется.

$("li > a").each(function(){ 
   if($(this).next("ul").length){ 
      $(this).addClass("dropdown"); 
   } 
});

a.dropdown::after { 
  content: '\2bc6'; 
  color:red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
    <li> 
        <a>Ссылка 1</a> 
        <ul> 
            <li> 
                <a>Ссылка 2</a> 
                <ul> 
                    <li> 
                    <a>Ссылка 3</a> 
                    </li> 
                </ul> 
            </li> 
        </ul> 
    </li> 
</ul>