j查询下拉菜单.页面标记无法正常工作 - 或者我想要它的方式

jQuery dropdown menu. Page marker not working correctly - or how i want it to

本文关键字：工作 或者 我想要 方式 常工作 下拉菜单 查询      更新时间：2023-09-26
导航

栏看起来与我自己这边的并不完全相同，因为我有背景图像等 - 但导航栏本身完美运行，即使在 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，那么所有三个都将选择属性"当前"。如果我选择不同的路径或链接，它应该遵循这些规则。

我不确定我需要去哪里，但这是现场示例：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

我需要做什么才能使所有人都被赋予"当前"的属性（或 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');
}

理想情况下，您将向每个ul添加 id 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
相关文章：