如何使側邊欄菜單保持打開狀態？

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>

現在，當我打開我的頁面（以組為例）時，url 將更改為此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');

Answer 2

我想你可以做到這一點

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