Javascript.RU

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

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

<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');
    }
});
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2020, 10:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,599

Stylus,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active {
      border: 1px solid red;
  }

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script>
$(function() {
let location = 'test';//window.location.protocol + '//' + window.location.host + window.location.pathname;
$(`a[href*="${location}"]`).parent().addClass('active').parents('.nested').addClass('active');
});
  </script>
</head>

<body>
<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="/test/">Ссылка</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>



</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическая загрузка в дерево ka-5 ExtJS 3 10.02.2014 12:25
Редактировать дерево assan Элементы интерфейса 1 22.10.2013 17:15
дерево зависимостей select от select JustCrazy Элементы интерфейса 4 18.12.2012 03:39
Поректомендуйте пожалуйста очень быстрое дерево Casufi Элементы интерфейса 0 17.02.2012 11:37
дерево adjacency в jqGrid Soaring jQuery 0 14.03.2011 21:06