При нажатии на ссылку подменю в Sidebar, оставить подменю открытым

Question

Всем привет) Я новичок в JS, Jquery, по этому сори если буду тупить. У меня есть n уровней подменю в sidebar, каждый из которых имеет также k ссылок (пример прикреплю на codepen). МОй основной вопрос в том, чтобы при нажатии на какой-либо пункт из подменю, оно оставалось открымым при переходе на соотвествующую ссылку.

$(function() {
  let $ul = $('.aside > ul');

  $ul.find('li a').click(function(e) {
    let $li = $(this).parent();

    if ($li.find('ul').length > 0) {
      e.preventDefault();

      if ($li.hasClass('selected')) {
        $li.removeClass('selected').find('li').removeClass('selected');
        $li.find('ul').slideUp(400);
        $li.find('a em').removeClass('fa-angle-up'); //<i class="fa-solid fa-angle-up"></i>
      } else {

        if ($li.parents('li.selected').length === 0) {
          $ul.find('li').removeClass('selected');
          $ul.find('ul').slideUp(400);
          $ul.find('li a em').removeClass('fa-angle-up');
        } else {
          $li.parent().find('li').removeClass('selected');
          $li.parent().find('> li ul').slideUp(400);
          $li.parent().find('> li a em').removeClass('fa-angle-up');
        }

        $li.addClass('selected');
        $li.find('>ul').slideDown(400);
        $li.find('>a>em').addClass('fa-angle-up');
      }
    }
  });


  $('.aside > ul ul').each(function(i) {
    if ($(this).find('>li>ul').length > 0) {
      let paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left');
      let pIntPLeft = parseInt(paddingLeft);
      let result = pIntPLeft + 20;

      $(this).find('>li>a').css('padding-left', result);
    } else {
      let paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left');
      let pIntPLeft = parseInt(paddingLeft);
      let result = pIntPLeft + 20;

      $(this).find('>li>a').css('padding-left', result).parent().addClass('selected--last');
    }
  });
});

.aside {
  width: 400px;
  height: auto;
  background-color: #fff;
  box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16);
}

.aside-title {
  display: block;
  font-size: 20px;
  color: #000;
  padding: 20px 0 10px 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.aside ul {
  margin-top: 20px;
}

.aside ul li {
  display: block;
}

.aside ul li a {
  position: relative;
  display: block;
  font-size: 1em;
  font-weight: 600;
  padding: 20px 25px;
  text-decoration: none;
  color: #2e2e2e;
  letter-spacing: .02em;
  border-bottom: 1px solid #eee;
  transition: all .3s linear;
}

.aside>ul>li>a {
  text-transform: uppercase;
}

.aside ul li a em {
  font-size: 24px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  border-radius: 50%
}

.aside ul li:hover>a,
.aside ul li.selected>a {
  background-color: #ecf0f1;
  color: darken(#ecf0f1, 60%);
  border-color: rgba(white, .1);
}

.aside ul li ul {
  display: none;
}

.aside ul li ul.open {
  display: block;
}

.aside ul li ul li a {
  color: darken(#ecf0f1, 60%);
  border-color: rgba(white, .1);
}

.aside ul li ul li a::before {
  content: '';
  width: 10px;
  height: 1px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  background-color: darken(#ecf0f1, 60%);
  transition: all .2s linear;
}

.aside ul li ul li:hover>a,
.aside ul li ul li.selected>a {
  background-color: darken(#ecf0f1, 2%);
}

.aside ul li ul li:hover>a::before,
.aside ul li ul li.selected>a::before {
  margin-right: 10px;
}

.aside ul li ul li.selected.selected--last>a {
  background-color: darken(#ecf0f1, 30%);
  color: #fff;
}

.aside ul li ul li.selected.selected--last>a::before {
  background-color: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">


<aside class="aside">
  <a href="" class="aside-title">Panel control</a>
  <ul>
    <li><a href="#">Test <em class="fa-solid fa-angle-down"></em></a>
      <ul>
        <li><a href="#">Mobile <em class="fa-solid fa-angle-down"></em></a>
          <ul>
            <li><a href="#"><i class="fa-solid fa-hashtag"></i> Social media</a></li>
            <li><a href="#"><i class="fa-solid fa-shield-halved"></i> Security</a></li>
            <li><a href="#"><i class="fa-solid fa-diagram-project"></i> Project</a></li>
            <li><a href="#"><i class="fa-solid fa-sd-card"></i> Hardware</a></li>
            <li><a href="#">Activity <em class="fa-solid fa-angle-down"></em></a>
              <ul>
                <li><a href="#"><i class="fa-solid fa-hashtag"></i> Social media</a></li>
                <li><a href="#"><i class="fa-solid fa-shield-halved"></i> Security</a></li>
                <li><a href="#"><i class="fa-solid fa-diagram-project"></i> Project</a></li>
                <li><a href="#"><i class="fa-solid fa-sd-card"></i> Hardware</a></li>
              </ul>
            </li>
          </ul>
        </li>

        <li><a href="#">Mobile <em class="fa-solid fa-angle-down"></em></a>
          <ul>
            <li><a href="#"><i class="fa-solid fa-hashtag"></i> Social media</a></li>
            <li><a href="#"><i class="fa-solid fa-shield-halved"></i> Security</a></li>
            <li><a href="#"><i class="fa-solid fa-diagram-project"></i> Project</a></li>
            <li><a href="#"><i class="fa-solid fa-sd-card"></i> Hardware</a></li>
            <li><a href="#">Activity <em class="fa-solid fa-angle-down"></em></a>
              <ul>
                <li><a href="#"><i class="fa-solid fa-hashtag"></i> Social media</a></li>
                <li><a href="#"><i class="fa-solid fa-shield-halved"></i> Security</a></li>
                <li><a href="#"><i class="fa-solid fa-diagram-project"></i> Project</a></li>
                <li><a href="#"><i class="fa-solid fa-sd-card"></i> Hardware</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#"><i class="fa-solid fa-memory"></i> Technology</a></li>
        <li><a href="#"><i class="fa-solid fa-gamepad"></i> Game</a></li>
        <li><a href="#"><i class="fa-brands fa-uncharted"></i> Software</a></li>
        <li><a href="#"><i class="fa-solid fa-wifi"></i> Internet</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fa-solid fa-gamepad"></i> Game</a></li>
  </ul>
</aside>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Answer 1

Общий смысл идеи такой:

Определяем, на какой странице мы находимся
Находим текущий пункт меню, не важно на какой вложенности
Всем его родителям проставляем класс "текущий"

let currentPage = "#two-two-two"; // замените на window.location.hash

$(".menu a").each(function(index) {
   if ($(this).attr("href")==currentPage) {
      $(this).parents("li").addClass("current");
   }
});

.menu li>ul {
  display: none;
}

.menu li:hover>ul, .menu li.current>ul {
  display: block;
}

.menu li.current>a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>
   <a href="#one">Один</a>
   <ul>
      <li><a href="#one-one">Один-один</a></li>
      <li><a href="#one-two">Один-два</a></li>
   </ul>
</li>
<li>
    <a href="#two">Два</a>
    <ul>
      <li><a href="#two-one">Два-один</a></li>
      <li>
        <a href="#two-two">Два-два</a>
          <ul>
            <li><a href="#two-two-one">Два-два-один</a></li>
            <li><a href="#two-two-two">Два-два-два</a></li>
          </ul>
      </li>
   </ul>
    </li>
<li><a href="#three">Три</a></li>
</ul>

БЛОГ НА HUSL

При нажатии на ссылку подменю в Sidebar, оставить подменю открытым

Ответы (1 шт):