Выделить активный пункт меню и раскрыть sidebar-item (Bootstrap 4)?

Question

[arsenaljek]

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

<nav id="sidebar" class="sidebar">
 <ul class="sidebar-nav">
  <li class="sidebar-item"><a href="/../<?=$rowCat['url']?>/" class="sidebar-link"><i class="<?=$rowCat['image_category']?>"></i> <span class="align-middle"><?=$rowCat['name_category']?></span></a></li> // Первый уровень
  <ul id="cat<?=$rowCat['id']?>" class="sidebar-dropdown list-unstyled collapse" data-parent="#sidebar">
    <li class="sidebar-item"><a class="sidebar-link" href="/../<?=$rowSubCat['url']?>/"><?=$rowSubCat['name_category']?></a> 
    </li> // Второй уровень
  </ul>
 </ul>
</nav>

Нужно добавить к <li class="sidebar-item">
класс Active
и класс show для class="sidebar-dropdown list-unstyled collapse

<ul id="cat<?=$rowCat['id']?>" class="sidebar-dropdown list-unstyled collapse" data-parent="#sidebar">

Я пробовал так, не получилось

$(function () {
    var links = $('.sidebar sidebar-item');
    var url = (new URL(document.URL)||{});
    $.each(links, function (key, va) {
        var Link = (new URL(va.href)||{});
        Link.search = url.search;
        if (Link.href  == url.href ) {
            $(this).addClass('active').parent().addClass('show');
        }
    });
});

Answer 1

[Антон Шаманов]

1. php: укажи относительный путь(path) полностью и без ссылок вроде "/../"
2. js: window.location.pathname текущий относительный путь, нужно вначале удалить класс active/show у предыдущего активного элемента

в bootstrap4 нет элемента sidebar-item, это аналог nav-item?

Comments

[arsenaljek]

в bootstrap4 нет элемента sidebar-item, это аналог nav-item?

Скорее всего да, я использую этот шаблон https://appstack.bootlab.io/dashboard-analytics.ht...

[arsenaljek]

Вопрос закрыт, смог сделать по 1 пункту на php. Спасибо)

[Антон Шаманов]

arsenaljek,

нужно вначале удалить класс active/show у предыдущего активного элемента

+ в селекторе '.sidebar sidebar-item' пропущена точка

var active = $('.sidebar .sidebar-item.active');
if (active.length) {
    active.removeClass('active').parent().removeClass('show');
}