How can I make the sidebar menu keep open?

Question

I'm using adminlte 3.

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="http://localhost:84/mysite/" class="brand-link">
        <img src="http://localhost:84/mysite/assets/icon/instagram.png" alt="AdminLTE Logo"
             class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light"> AClub Backend </span>
    </a>

    <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">

            <div class="info">
                <a href="#" class="d-block">Boby Kurniawan <br> Developer U001 </a>
            </div>
        </div>

        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                data-accordion="false">


                <li class="nav-item has-treeview">
                    <a href="http://localhost:84/mysite/#" class="nav-link ">
                        <i class="nav-icon fas fas fa-list"></i>
                        <p>Master <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>

                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="http://localhost:84/mysite/Member/" class="nav-link ">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Members</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="http://localhost:84/mysite/Group/" class="nav-link ">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Group</p>
                            </a>
                        </li>
                    </ul>
                </li>


                <li class="nav-header"></li>
                <li class="nav-item">
                    <a href="http://localhost:84/mysite/Loginform/goToportal" class="nav-link">
                        <i class="nav-icon fas fa-undo-alt"></i>
                        <p>
                            Back to menu category
                        </p>
                    </a>
                </li>


                <li class="nav-item">
                    <a href="http://localhost:84/mysite/welcome/logout" class="nav-link">
                        <i class="nav-icon fas fa-sign-out-alt"></i>
                        <p>
                            Logout
                        </p>
                    </a>
                </li>

            </ul>
        </nav>
    </div>
</aside>

For now when i open my page (Group as example ) the url will change to this http://localhost:84/mysite/Group/ the sub menu is open like this

Here is what i do

var url = window.location;
$('ul.nav-sidebar a').filter(function() {
    return this.href == url;
}).addClass('active');

$('ul.nav-treeview a').filter(function() {
    return this.href == url;
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');

But when i open another page that inside Group path. Example http://localhost:84/mysite/Group/detail/1

My menu become like this

So, my question is how can i keep the menu open? thanks in advance and sorry for my english.

Answer 1

this should work

var url = window.location.href;

$('ul.nav-sidebar a').filter(function() {
    var rgx = new RegExp($(this).attr("href"), "gi");
    return url.match(rgx);
}).addClass('active');

$('ul.nav-treeview a').filter(function() {
    var rgx = new RegExp($(this).attr("href"), "gi");
    return url.match(rgx);
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');

Answer 2

I guess you can do this

var url = window.location.url;


$('ul.nav-treeview a').filter(function() {
    return url.includes(this.href);
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');