Javascript jQuery下拉菜单。页面标记器工作不正常-或我希望它如何工作

导航栏的外观与我自己的不完全相同，因为我有背景图像等等，但是导航栏本身工作得非常完美，即使在JSFIDLE上它看起来有点时髦

我遇到的问题是，无论何时我在一个页面上，我的可视标记都无法在JSFIDLE上很好地看到，或者根本看不到，因为我无法单击其他页面）。我能够让视觉标记在我点击的特定页面上工作，但只有在特定的点击中，我试图实现的是一个视觉标记，无论你在页面的深处有多远（无论是ul li a还是ul li>ul li a，甚至是ul li>ul li>ul li a）。比如说

（需要查看JSFIDLE才能理解我的意思）如果我将鼠标悬停在“Web”上，则会出现一个下拉列表。然后，我继续转到“Web-215”，在那里有另一个下拉列表，我决定导航到“jQuery”页面

当前发生的情况是：当我单击“jQuery”时，单个项被赋予了一个“current”id。这改变了外观。但它只对那一个项目起作用

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

我不确定我需要去哪里，但这里是一个活生生的例子：

这就是我认为JSFIDLE中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），而不仅仅是一个元素。

首先要注意的是，一个页面上不应该有多个元素具有相同的id。请改用类

如果突出显示当前页面项成功，但没有突出显示它的父项，则可以使用jQuery的

closest（）

方法，并向其添加“current”类（这意味着更改css以反映类而不是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');
}

---

理想情况下，您应该将

id

s添加到每个

ul

s，而不是向上遍历dom。

这是我提出的问题的解决方案-感谢给我输入的人

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