使用jquery将菜单动态设置为活动

我正在尝试创建一个动态菜单的网站，我正在努力。一切都很平静，直到我添加了更多的菜单项，我无法让它再次工作

在大多数情况下，URL看起来像：

http://domain.tld/mask1/coolfunction
http://domain.tld/mask2/function1
http://domain.tld/mask2/function2

但是，类似这样的链接会引发问题：

http://domain.tld/onemask/function1/month
http://domain.tld/twomask/function2/month

由于拆分了url并比较了最后一个元素，这让我很头疼

我试图重写它来检查整个url，但我无法让菜单正常工作

var current = location.pathname.split("/").slice(-1)[0].replace(/^\/|\/$/g, '');

$('.nav li a', sidebar).each(function() {
    var $this = $(this);
    if ($this.attr('href').indexOf(current) !== -1) {

        $(this).parents('.nav-item').last().addClass('active');
        if ($(this).parents('.sub-menu').length) {
            $(this).addClass('active');
            return false;
        }

        if (current !== "index.html") {
            $(this).parents('.nav-item').last().find(".nav-link").attr("aria-expanded", "true");
            if ($(this).parents('.sub-menu').length) {
                $(this).closest('.collapse').addClass('show');
            }
        }
    }
});

html：

    <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" href="#page-dispo" aria-expanded="false" aria-controls="page-dispo">
            <i class="menu-icon mdi mdi-progress-clock"></i>
            <span class="menu-title">Zeiterfassung</span>
            <i class="menu-arrow"></i>
        </a>
        <div class="collapse" id="page-dispo">
        <ul class="nav flex-column sub-menu">
            <li class="nav-item"><a class="nav-link" href="/vertragsliste/{{ current_user.calweek }}">Verträge</a></li>
            <li class="nav-item"><a class="nav-link" href="/mitarbeiterliste/{{ current_user.month }}">Mitarbeiter</a></li>
        </ul>
        </div>
    </li>


    <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" href="#page-auswertungen" aria-expanded="false" aria-controls="page-auswertungen">
            <i class="menu-icon mdi mdi-chart-areaspline"></i>
            <span class="menu-title">Auswertungen</span>
            <i class="menu-arrow"></i>
        </a>
        <div class="collapse" id="page-auswertungen">
        <ul class="nav flex-column sub-menu">
            <li class="nav-item"><a class="nav-link" href="/auswertung/vertragssicht/{{ current_user.month }}">Verträge</a></li>
            <li class="nav-item"><a class="nav-link" href="/auswertung/mitarbeitersicht/OL-999/{{ current_user.month }}"> Mitarbeiter</a></li>
        </ul>
        </div>
    </li>

我想出了一个办法让它按我想要的方式工作。如果有人曾经遇到过类似的问题，那就是我找到的解决方案：

// Bugfix fehlerhaftes Menü

$(function(){
    $(".nav-link").each(function(){

        if ($(this).attr("href") == window.location.pathname){
            $(this).addClass("active areaToExpand");
            $('.areaToExpand').parent().parent().parent().addClass('activeParent show');
            $('.areaToExpand').parent().parent().parent().attr('aria-expanded', 'true');    
        }

        // test Auswertung mit OL Regex
        let ollink = /^((OL)[(-|)]\d+)|(OL-000)}$/i;
        let checkOLLink = window.location.pathname.toString().split('/')[3];
        //console.log(checkOLLink);



            if(window.location.pathname.toString().split('/')[2] == 'mitarbeitersicht'){

                $('a[href*="/auswertung/mitarbeitersicht/"]').addClass('active show');
                $('a[href*="/auswertung/mitarbeitersicht/"]').parent().parent().parent().addClass('activeParent show');
                $('a[href*="/auswertung/mitarbeitersicht/"]').parent().parent().parent().attr('aria-expanded', 'true');   
            }
    });
});

---

我想出了一个办法让它按我想要的方式工作。如果有人曾经遇到过类似的问题，那就是我找到的解决方案：

// Bugfix fehlerhaftes Menü

$(function(){
    $(".nav-link").each(function(){

        if ($(this).attr("href") == window.location.pathname){
            $(this).addClass("active areaToExpand");
            $('.areaToExpand').parent().parent().parent().addClass('activeParent show');
            $('.areaToExpand').parent().parent().parent().attr('aria-expanded', 'true');    
        }

        // test Auswertung mit OL Regex
        let ollink = /^((OL)[(-|)]\d+)|(OL-000)}$/i;
        let checkOLLink = window.location.pathname.toString().split('/')[3];
        //console.log(checkOLLink);



            if(window.location.pathname.toString().split('/')[2] == 'mitarbeitersicht'){

                $('a[href*="/auswertung/mitarbeitersicht/"]').addClass('active show');
                $('a[href*="/auswertung/mitarbeitersicht/"]').parent().parent().parent().addClass('activeParent show');
                $('a[href*="/auswertung/mitarbeitersicht/"]').parent().parent().parent().attr('aria-expanded', 'true');   
            }
    });
});