Показать сообщение отдельно
  #1 (permalink)  
Старый 17.11.2020, 10:13
Новичок на форуме
Отправить личное сообщение для Stylus Посмотреть профиль Найти все сообщения от Stylus
 
Регистрация: 17.11.2020
Сообщений: 3

Многоуровневое дерево
Есть многоуровневое дерево разделов, в которых статьи. При нажатие на заголовок раскрывается список статей с силками.
Задача: при переходе на статью которая например находиться на третьем уровне вложенность сделать так чтоб все родители были развернуты. Уровень вложенности не известен

<ul class="tree" id="tree">
    <li><span class="caret">Заголовок</span>
        <ul class="nested"> <!--добавить класс active-->
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><span class="caret">Заголовок</span>
                <ul class="nested"> <!--добавить класс active-->
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><span class="caret">Заголовок</span>
                        <ul class="nested"> <!--добавить класс active-->
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><span class="caret">Заголовок</span>
                                <ul class="nested"> <!--добавить класс active-->
                                    <li><a href="/link-l4/">Ссылка</a></li> <!--selected-->
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<!--Это все на что меня хватило. Класс добавляется только к ближайшему родителю-->
$('ul.nested a').each(function () {
    let location = window.location.protocol + '//' + window.location.host + window.location.pathname;
    let link = this.href;

    if (link == location) {
        $(this).closest('.nested').addClass('active');
    }
});
Ответить с цитированием