我有 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>
最佳答案
由于您使用的是 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');
...
});
关于javascript - 如何使用 cookie 或本地存储将类添加到子菜单的父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52699679/