Question

我有2个带有常用侧边栏菜单的不同页面。在我的示例中，您可以看到带有子菜单的父菜单。在仪表板中，我有page1子菜单，当我单击它时，重定向到其他页面，我想在侧栏中父菜单中应添加一个类。甚至我也刷新页面。

这是我的HTML代码

<ul class="nav nav-sidebar">
    <li class="sidebar-nav-item with-sub">
        <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
        <ul class="nav sidebar-nav-sub">
            <li class="nav-sub-item"><a href="menu1.html" class="nav-sub-link">Page 01</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>
        </ul>
    </li>
    <li class="sidebar-nav-item with-sub">
        <a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
        <ul class="nav sidebar-nav-sub">
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 01</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>
            <li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>
        </ul>
    </li>
    <li class="sidebar-nav-item with-sub">
        <a href="" class="sidebar-nav-link"><i class="icon ion-ios-book-outline"></i> Pages</a>
        <ul class="nav sidebar-nav-sub">

            <li class="nav-sub-item sub-with-sub">
                <a href="#" class="nav-sub-link">Pricing</a>
                <ul>
                    <li class="sub-sub-link"><a href="">Pricing 01</a></li>
                    <li class="sub-sub-link"><a href="">Pricing 02</a></li>
                    <li class="sub-sub-link"><a href="">Pricing 03</a></li>
                </ul>
            </li>

        </ul>
    </li>
</ul>

Answer 1

由于使用的是jQuery，因此可以使用jquery库js-cookie将选定的菜单添加到cookie中，然后在其他页面中读取它并附加类。

但是我建议另一种基于页面目标URL的方法，相关的锚点将激活父侧边栏菜单项。

将以下行添加到ready函数的顶部：

$(document).ready(function() {
    $('a[href="'+window.location.pathname+'"]').closest('.sidebar-nav-item').find('.sidebar-nav-link').addClass('active');

    ...
});

如何使用Cookie或本地存储将类添加到子菜单的父级

1 个答案: