Question

我有一些代码我用于侧面导航菜单，主要用于我需要的方式。

三列布局的每一侧有两个侧边栏菜单。分层右侧的侧边栏是主菜单，位于ASP.NET MasterPage中。此菜单根据URL将其菜单项设置为活动（CSS）。

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

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

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

$(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");

        }

    });
});

Answer 1

尝试使用parentsUntil（'topmenu'）

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

Answer 2

试试这个：

$(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");

        }

    });
});

使用jQuery基于URL将父菜单项和子子菜单项设置为活动

2 个答案: