📅  最后修改于: 2023-12-03 15:39:00.517000             🧑  作者: Mango
有时候,在您的网站上进行页面导航的时候,可能会出现路径不同但是处于同一导航菜单下的问题。在这种情况下,我们需要在 JQuery 中的导航菜单中始终保持父级菜单处于活动状态。
以下是可以用来解决这个问题的代码:
$(function() {
var current = location.pathname;
$('#navigation a').each(function() {
var $this = $(this);
// 如果当前页面的URL包含菜单项的URL, 则为该菜单项添加活动类
if (current.indexOf($this.attr('href')) !== -1) {
$this.addClass('active');
// 获取菜单项的父级菜单
$this.parent().parents(".parent-menu-item").each(function () {
$(this).find("a:first").addClass("active");
});
}
})
})
在这段代码中,我们首先获取当前页面的路径名,并使用 jQuery each
函数来遍历所有导航菜单项。如果当前页面的 URL 包含菜单项的 URL,则为该菜单项添加 active
类。接下来,我们获取该菜单项的父级菜单,并将其添加为活动菜单,以确保父级菜单和子级菜单均处于活动状态。
使用此代码片段可以轻松解决路径不同但父导航项应处于活动状态的问题。