使用 jQuery 根据 URL 将父菜单项和子子菜单项设置为活动状态答案

【问题标题】：Set parent menu item and child sub menu item to active based on URL using jQuery使用 jQuery 根据 URL 将父菜单项和子子菜单项设置为活动状态
【发布时间】：2015-12-20 13:34:01
【问题描述】：

我有一些代码用于侧边导航菜单，主要按我的要求工作。

在三列布局的每一侧都有两个侧边栏菜单。右侧的侧边栏按层次结构是主菜单，位于 ASP.NET MasterPage 中。此菜单根据 URL 将其菜单项设置为活动 (CSS)。

左侧边栏是一个子菜单，它位于 ASP.NET NestedMasterPage 中，这也将其菜单项设置为活动状态。

所以父导航和子导航应该同时处于激活状态。但是，当我选择左侧有一个子菜单项的父菜单项时，只有一个菜单状态（目前是子菜单项）处于活动状态。

我知道这与 URL 有关，但我不确定如何解决问题。

$(document).ready(function () {
    var str = location.href.toLowerCase();

    $("#menu1 li a").each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {


            $("li.active").removeClass("active");

            $(this).parent().addClass("active");

        }

    });


    $("#menu2 li a").each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {

            $("li.active").removeClass("active");

            $(this).parent().addClass("active");

        }

    });
});

【问题讨论】：

标签： javascript jquery css asp.net

【解决方案1】：

试试这个：

$(document).ready(function () {
    var str = location.href.toLowerCase();

    $("#menu1 li a").each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {


            $("#menu1 li.active").removeClass("active");

            $(this).parent().addClass("active");

        }

    });


    $("#menu2 li a").each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {

            $("#menu2 li.active").removeClass("active");

            $(this).parent().addClass("active");

        }

    });
});

【讨论】：

主侧导航菜单几乎可以按照我想要的方式工作。当我点击主导航并到达一个页面时，有一个子导航，两个导航都突出显示。但是，当我选择该子导航的顶部链接以外的任何链接时，主侧导航会跳回到结构中的顶部菜单项。如果在子导航中选择所有菜单项，我需要保留主侧导航。
你能做一个jsFiddle和我们分享吗？这将使我们更容易理解问题。

【解决方案2】：

尝试使用 parentsUntil('topmenu')

$(this).parentsUntil('topmenu').addClass("active");

【讨论】：