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

Question

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

这是我的 HTML 代码

Check this fiddle

<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 定位相关的 anchor ，它们激活父侧边栏菜单项。

将以下行添加到准备好的函数的顶部:

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

    ...
});