javascript - jQuery 下拉菜单。页面标记无法正常工作 - 或者我希望它如何工作

Question

导航栏看起来与我自己的导航栏不完全一样，因为我有背景图像等 - 但导航栏本身工作完美，即使在 jsfiddle 上它看起来有点时髦。

我遇到的问题是，每当我在页面上时，我的视觉标记都无法在 jsFiddle 上很好地看到或根本看不到，因为我无法单击其他页面)。我能够让视觉标记在我点击的特定页面上工作，但仅限于那个特定的点击，我想要实现的是一个视觉标记，无论你在多远的地方页面(无论是 ul li a 还是 ul li > ul li a 甚至 ul li > ul li > ul li a)。例如。

(需要查看 Jsfiddle 才能理解我在说什么)如果我将鼠标悬停在“Web”上，会出现一个下拉菜单。然后我继续转到“Web-215”，那里有另一个下拉菜单，我决定在其中导航到“jQuery”页面。

当前发生的情况是:当我单击“jQuery”时，那个单个项目的 ID 为“当前”。这改变了外观。但它只对单个项目执行此操作。

我想要它做的是:如果我只点击“Web”，它只会将属性添加到“Web”，但如果我点击“Web > Web-215”或该文件夹中的任何内容 - 然后它会突出显示 Web 和 web-215。而且-如果我点击'jQuery'这是'Web-215'的第三级li，那么所有三个都将选择属性'current'。我应该选择不同的路径或链接，它应该遵循这些规则。

我不确定我需要用它去哪里，但这里是活生生的例子:http://jsfiddle.net/knvH4/2/

这是我认为问题出在 jsfiddle 中 javascript 的第 16 行

function youAreHere() {
var pathName = $(location).attr('pathname');
var curPage = pathName.substring(pathName.lastIndexOf('/') + 1);
$('a').each(function () {
    if ($(this).attr('href') == curPage) {
        $(this).attr('id', 'current');
    } else if (curPage == '') {
        $('a:first').attr('id', 'current');
    }
}); //END function

我需要做什么才能使所有人都获得“current”的属性(或 id)，而不仅仅是那个。

Answer 1

首先要注意的是，您永远不应该为页面上的多个元素提供相同的 ID。请改用类。

如果您成功突出显示了当前页面项目，但不是它的父项，您可以使用 jQuery 的 closest() 方法并向其添加“当前”类(这意味着更改css 来反射(reflect)一个类而不是 id)。我还没有测试下面的代码，但我认为它会有所帮助:

if ($(this).attr('href') == curPage) {
    $(this).addClass('current');

    //if inside child menu, highlight parent anchor
    if($(this).closest('ul').siblings('a').length){
        $(this).closest('ul').siblings('a').addClass('current');

        //if inside grandchild menu, highlight grandparent anchor as well
        if($(this).closest('ul').siblings('a').closest('ul').siblings('a').length){
            $(this).closest('ul').siblings('a').closest('ul').siblings('a').addClass('current');
        }
    }
} else if (curPage == '') {
    $('a:first').addClass('current');
}

理想情况下，您将向每个 ul 添加 id，而不是向上遍历 dom。