javascript - 如何使侧边栏菜单保持打开状态？

Question

我正在使用 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>

现在，当我打开我的页面(以组为例)时，网址将更改为 http://localhost:84/mysite/Group/子菜单是这样打开的

这是我所做的

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

但是当我打开另一个页面时 Group小路。示例 http://localhost:84/mysite/Group/detail/1我的菜单变成这样

所以，我的问题是如何保持菜单打开？预先感谢并为我的英语感到抱歉。

Answer 1

这应该有效

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