как сделать родителя активным, когда выбран родитель?

Question

У меня есть заголовок с меню с выпадающими также мега выпадающий. Я до сих пор объединился, чтобы выделить родительский элемент, но когда на ребенка нажимают, это не работает. Я искал и пробовал все, что мог найти, но не удача софар. У меня есть это: в верхней части заголовка и на каждой раскрывающейся ссылке: ", это прекрасно работает для родителя, но опять-таки дочерний элемент родителя не сделает родителя активным. Вот пример раскрывающегося списка, который я имею :

<li class="dropdown">
  <a class="dropdown-item dropdown-toggle <?= ($activePage == 'Link1') ? 'active':''; ?>" href="#">Link1</a>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a class="dropdown-item"  <?= ($activePage == 'Link2') ? 'active':''; ?>" href="#">Link2</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item <?= ($activePage == 'Link3') ? 'active':''; ?>" href="#">Link3</a></li>
        <li class="dropdown-submenu">
          <a class="dropdown-item <?= ($activePage == 'Link4') ? 'active':''; ?>" href="#">Link4</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item <?= ($activePage == 'Link5') ? 'active':''; ?>" href="#">Link5</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a class="dropdown-item"  <?= ($activePage == 'Link6') ? 'active':''; ?>" href="#">Link6</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item <?= ($activePage == 'Link7') ? 'active':''; ?>" href="#">Link7</a></li>
        <li class="dropdown-submenu">
          <a class="dropdown-item <?= ($activePage == 'Link8') ? 'active':''; ?>" href="#">Link8</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item <?= ($activePage == 'Link9') ? 'active':''; ?>" href="#">Link9</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a class="dropdown-item <?= ($activePage == 'Link10') ? 'active':''; ?>" href="#">Link10</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item <?= ($activePage == 'Link11') ? 'active':''; ?>" href="#">Link11</a></li>
        <li class="dropdown-submenu">
          <a class="dropdown-item <?= ($activePage == 'Link12') ? 'active':''; ?>" href="#">Link12</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item <?= ($activePage == 'Link13') ? 'active':''; ?>" href="#">Link13</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>

Как я могу заставить его работать с php или это нельзя вообще сделать ????

Answer 1

выглядит как bootstrap. Вот пример javascript

// APP / assets / js / app. js import '../css/nav.scss';

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');
import 'bootstrap'; //add functions to jQuery
//uncomment to support legacy code
global.$ = $;

//navigation active class settings
$(document).ready(function () {
    $(function () {
        var current_page_URL = location.href;

        $("a").each(function () {

            if ($(this).attr("href") !== "#") {
                var target_URL = $(this).prop("href");

                if (target_URL == current_page_URL) {
                    $('nav a').parents('li, ul').removeClass('active');
                    $(this).parent('li').addClass('active');

                    return false;
                }
            }
        });
    });
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });
});

//APP/templates/base.html.twig

...
{% block javascripts %}
        {{ encore_entry_script_tags('app') }}


{% endblock %}