嵌套列表-使用Javascript选择路径

Nested lists - selecting path using Javascript

本文关键字：选择 路径 Javascript 使用 列表 嵌套      更新时间：2023-09-26

我有一个Javascript函数，它是添加css类"current"到选定的链接<a>。这个函数看起来像这样:

function markActiveLink() {
    var path = location.pathname;
    var links = null;
    if (path) {
        links = $("a[href^='" + path + "']");
    } else {
        links = $("a[href='/']");
    }
    links.parents("li").each(function () {
        $(this).addClass("current");
    });
}

我有一个嵌套列表，看起来和那个列表很像:

<ul class="menu">
    <li><a href="#a">menu item</a>
        <ul>
            <li><a href="#aa">menu item</a> </li>
            <li><a href="#ab">menu item</a></li>            
            <li><a href="#">menu item</a></li>
        </ul>
    </li>
        <li><a href="#a">menu item</a>
        <ul>
            <li><a href="#aa">menu item</a> </li>
            <li><a href="#ab">menu item</a></li>            
            <li><a href="#">menu item</a></li>
        </ul>
    </li>
</ul>

我想添加类"当前"(使用Javascript函数)不链接<a>像它现在工作，但<li>元素和它的父<li>。所以它看起来像这样:

<ul class="menu">
    <li class="current"><a href="#a">menu item</a>
        <ul>
            <li><a href="#aa">menu item</a> </li>
            <li class="current"><a href="#ab">menu item</a></li>            
            <li><a href="#">menu item</a></li>
        </ul>
    </li>
        <li><a href="#a">menu item</a>
        <ul>
            <li><a href="#aa">menu item</a> </li>
            <li><a href="#ab">menu item</a></li>            
            <li><a href="#">menu item</a></li>
        </ul>
    </li>
</ul>

问题:我如何修改我的功能markActiveLink()，使它会添加类"当前"<li>元素和它的父<li>元素?

任何帮助在这里非常感激!

尝试:

links.parent().addClass('current')
     .closest('li').addClass('current');
jQuery文档

在我看来，它正在工作。我只更改了链接中的href，这样它们就不会重复，并添加了一些CSS来显示这个JSFiddle

中的高亮元素。

使用.parent() api来完成文档编辑像这样:

$(this).parent().parent().addClass("current")
相关文章：