Форум

Stylus · #1 (**permalink**) 17.11.2020, 10:13

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

<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

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>

Stylus · #3 (**permalink**) 18.07.2021, 20:50

рони, помоги еще немного. Надо всем spam.caret добавить класс open относительно <li><a href="/test/">Ссылка</a></li>  вверх по дереву

рони · #4 (**permalink**) 18.07.2021, 21:59

Stylus,
в конце 18 строки после .addClass('active') добавить

.prev('.caret').addClass('open')

Stylus · #5 (**permalink**) 18.07.2021, 22:39

рони, спасибо большое.

Форум

Справочник

Discord чат

Курсы javascript