Как активировать каждую ссылку в дереве двухуровневого меню, используя jquery?

Question

Если бы существовало только одноуровневое дерево меню, активация и деактивация ссылок не была бы проблемой.

<ul class="sidemenu">
 <li class="active"><a href="#">some title</a></li>
 <li><a href="#">some title</a></li>
 <li><a href="#">some title</a></li>
 etc ...
</ul>

$('.sidemenu').on('click', 'li', function() {
    $('.sidemenu li.active').removeClass('active');
    $(this).addClass('active');
});

Мне нужно было решить, активировать / деактивировать каждую ссылку в двух -уровень дерева меню, но я не нашел правильного или рабочего решения. Я очень хорошо понимаю, что этот код jquery подходит для одноуровневого меню.

Я искал повсюду хорошие подсказки. Моя голова пуста.

Мой код jsfiddle здесь: https://jsfiddle.net/kukrik/d3pcrhnm/15/.

Буду очень признателен, если у кого-нибудь будет хороший совет или опыт, которым можно поделиться.

Answer 1

https://jsfiddle.net/kukrik/d3pcrhnm/15/ вы должны дать событие click для

$('.sidemenu').on('click', 'a', function() {
    $('a.active').removeClass('active');
   $(this).addClass('active');      
});

, а также обновить css

#sidebar nav ul li a.active  {
    background: rgba(239, 137, 31, 0.17);
}

#sidebar nav ul li a.active:hover {
    color: #181818;
    background: rgba(247, 148, 30, 0.27);
}