Dynamically set menu to active using jquery

问题: I'm trying to create a website with a dynamic menu and I'm struggeling. Everything worked really calm until I added a lot more menu items and I'm not able to get this to wo...

问题:

I'm trying to create a website with a dynamic menu and I'm struggeling. Everything worked really calm until I added a lot more menu items and I'm not able to get this to work again.

for the most part the urls look like:

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

however, links like these causing issues:

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

and since splitting the url and just comparing the last element, it giving me headache since.

I tried rewriting it to check the entire url instead but i can't get the menu to work

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');
            }
        }
    }
});

the 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>

回答1:

I figured a way out to get this to work the way I want it. In case anyone ever has a simular problem, that's the solution I found:

// 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');   
            }
    });
});
  • 发表于 2019-12-25 18:38
  • 阅读 ( 408 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除