如何使用cookie或本地存储将类添加到子菜单的父级 [英] How to use cookies or local-storage for add a class to parent of sub-menu

问题描述

我有两个不同的页面，带有常见的侧边栏菜单。在我的示例中，您可以看到带有子菜单的父菜单。在Dashboard我有page1子菜单，当我点击它时，重定向到其他页面，我想在侧边栏中父菜单应该添加一个类。即使我刷新页面。

I have 2 different pages with common sidebar menu. In my example, you can see Parent Menus with Submenus. In Dashboard I've page1 sub-menu, when I click on it, redirects to other pages, I want in sidebar Parent menu should add a class. Even I refresh the page.

这是我的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>

推荐答案

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

Since you're using jQuery, you could use the jquery lib js-cookie to add the selected menu to the cookies then read it in the other pages and attach the class.

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

But I suggest another way based on the URL of the page target the related anchor them activate the parent sidebar menu item.

将以下行添加到页面顶部你准备好的功能：

Add the following line to the top of your ready function :

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

    ...
});

这篇关于如何使用cookie或本地存储将类添加到子菜单的父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！