显示侧边栏管理的活动菜单

Posted 2023-04-12

【中文标题】显示侧边栏管理的活动菜单

【英文标题】：Showing active menu for sidebar adminlte

【发布时间】：2021-10-04 00:09:34

【问题描述】：

这是我的管理侧边栏。

 <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
        with font-awesome or any other icon font library -->
                     <li class="nav-item">
                <!--menu-open attribute-->
                <a href="#" class="menu-open nav-link active">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                        Adımlar
                        <i class="right fas fa-angle-left"></i>
                    </p>
                </a>
                <ul class="nav nav-treeview">
                    <li class="nav-item">
                        <a href="~/StepTwo/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 1</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepThree/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 2</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepFour/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 3</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepFive/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 4</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepSix/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 5</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepSeven/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 6</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepEight/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 7</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepEight/ListEight" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 8</p>
                        </a>
                    </li>
                    
                </ul>
            </li>
                </ul>
            </nav>

下面是我的脚本，用于激活我的侧边栏。我在 github 页面上找到了它，但我想我错过了一些东西，我似乎无法弄清楚。

<script>
    var url = window.location;
    // for sidebar menu but not for treeview submenu
    $('ul.sidebar-menu a').filter(function () 
        return this.href == url;
    ).parent().siblings().removeClass('active').end().addClass('active');
    // for treeview which is like a submenu
    $('ul.treeview-menu a').filter(function () 
        return this.href == url;
    ).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active menu-open').end().addClass('active menu-open');
</script>

它不起作用。我想在用户在页面上徘徊时显示最后点击的菜单处于活动状态。我是一个 javascript 新手，非常感谢您的解释。

【参考方案1】：

找到了答案，而且效果很好。也许它会对其他人有所帮助。

<script>
    /** add active class and stay opened when selected */
    var url = window.location;
    const allLinks = document.querySelectorAll('.nav-item a');
    const currentLink = [...allLinks].filter(e => 
        return e.href == url;
    );

    if (currentLink.length > 0)  //this filter because some links are not from menu
        currentLink[0].classList.add("active");
        currentLink[0].closest(".nav-treeview").style.display = "block";
        currentLink[0].closest(".has-treeview").classList.add("active");
    
</script>