Добавить класс в боковое меню родительского меню и подменю при нажатии

Question

Я хочу добавить класс active в боковое меню родительского и подменю при нажатии. Я пробовал этот код, но он не будет работать. Пожалуйста, проверьте мой код и предложите мне, что и где я пропустил.

$("#sidebar-menu ul li.with_sub a.active").parents("li:last").children("a:first").addClass("active").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slim-sidebar" id="sidebar-menu">
  <label class="sidebar-label">Navigation</label>
  <ul class="nav nav-sidebar">
    <li class="sidebar-nav-item with-sub">
      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
      <ul class="nav sidebar-nav-sub">
        <li class="nav-sub-item"><a href="menuother.html" class="nav-sub-link">Page 01</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>
      </ul>
    </li>
    <li class="sidebar-nav-item with-sub">
      <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
      <ul class="nav sidebar-nav-sub">
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>
        <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

Проверьте следующий код, он работает

$("#sidebar-menu ul.nav li.with-sub li a").click(function() {
  $("#sidebar-menu ul.nav li.with-sub li a").removeClass("active");
  $(this).addClass('active');
  $("#sidebar-menu ul.nav li.with-sub a.sidebar-nav-link").removeClass("active");
  $(this).parent().parent().parent().find('a.sidebar-nav-link').addClass('active');
});

#sidebar-menu li a.active {
  color: black;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slim-sidebar" id="sidebar-menu">
  <label class="sidebar-label">Navigation</label>
  <ul class="nav nav-sidebar">
    <li class="sidebar-nav-item with-sub">
      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
      <ul class="nav sidebar-nav-sub">
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 01</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 02</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 03</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 04</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Page 05</a></li>
      </ul>
    </li>
    <li class="sidebar-nav-item with-sub">
      <a href="javaScript:void(0)" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
      <ul class="nav sidebar-nav-sub">
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 01</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 02</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 03</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 04</a></li>
        <li class="nav-sub-item"><a href="javaScript:void(0)" class="nav-sub-link">Menu 05</a></li>
      </ul>
    </li>
  </ul>
</div>