Multiple active items

[maethor]

In a second level menu, we have the following items:

• https://localhost:8443/accounting/control/findPurchaseInvoices
• https://localhost:8443/accounting/control/findPurchaseInvoicesWriteOff

When we are on the second page, the two links are active.

I have search for a reported issue in https://github.com/onokumus/metisMenu/, but I could'nt find one. I'm not really sure if it comes from metisMenu or sb-admin-2.

Thanks.

[george7551858]

In sb-admin-2.js :

var url = window.location;
var element = $('ul.nav a').filter(function() {
    return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();

So if window.location is http://localhost/foo/bar?var=xyz , the http://localhost/foo/bar link is active. However, in your case window.location is: https://localhost:8443/accounting/control/findPurchaseInvoicesWriteOff, then the nav link of https://localhost:8443/accounting/control/findPurchaseInvoices will be activated, which is not what you want.

[maethor]

Yes, that's exactly the problem. Can you fix this? I can take some time to try something and submit a PR if I find a solution, but I'm not really a JS developer, so it could be quite ugly.

Anyway, thank you for pointing me that this comes from sb-admin-2 and not from metisMenu as I thought first.

[nkokkos]

Hi, I had the same problem and the above commit fixed it. Thank you too! But I don't see the commit updated to main branch: https://github.com/IronSummitMedia/startbootstrap-sb-admin-2/blob/gh-pages/dist/js/sb-admin-2.js#L31

[nkokkos]

Sorry, I got it, it's a commit from swjawa that has not been merged.

[ctrl-f5]

I'm also having this issue, the fix resolved the problem, but broke other link activation when in sub paths.

I've adjusted the code to only select the active link with the most slashes in it:

    var url = window.location;
    var maxSlashes = 0;
    var element = $('.sidebar-nav ul.nav a').filter(function() {
        if (this.href == url || url.href.indexOf(this.href) == 0) {
            var slashCount = (this.href.match(new RegExp("/", "g")) || []).length;
            if (slashCount > maxSlashes) maxSlashes = slashCount;
            return true;
        }
    }).filter(function () {
        return (this.href.match(new RegExp("/", "g")) || []).length == maxSlashes;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('li')) {
        element.addClass('active');
    }

[chrispickford]

This issue still exists in v1.0.8 as the fix doesn't seem to have been merged into master.

[davidtmiller]

This issue might be going away with a new sidebar build. I might be moving away from metis menu which will change quite a bit regarding this template.

If you want to submit another pull request, feel free to submit anything to master for review though!

[davidtmiller]

I am moving away from metisMenu 100% in the next major release so I'm going to close this for now.

[EltonRst]

Hi everyone, I know the topic is already closed, I tested all the above solutions, none of them worked, so I decided to make one of my own, maybe I can help someone.

var url = location.href;
    var element = $('ul.nav a').filter(function() {
        return this.href == url;
    }).addClass('active').parent().parent().addClass('in').parent();

    if (element.is('li')) {
        element.addClass('active');
    }

[jjsty1e]

@EltonRst your solution is good for me, very thanks, mybe you could make a pull request to the maintainer.

[davidtmiller]

@EltonRst does this work for the Bootstrap 4 version? I didn't want to add a bunch of extra custom JS because a lot of folks will be porting this into various JS frameworks and would use other methods to make this happen, but if this works with the HTML version I could certainly add it in.

[EltonRst]

@Jaggle Glad I could help, but I think a pull request will not be accepted by the administrator.

[EltonRst]

I have not migrated to bootstrap 4 yet, I still use version 3, so I do not know if it will work. Either way you can test and share the result with others!