Question

我有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");
    });
}

我有嵌套列表wchich看起来类似于该列表：

<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>，以便将{class 1}元素及其<li>元素添加到“当前”类？

这里的任何帮助都非常感谢！

Answer 1

尝试：

links.parent().addClass('current')
     .closest('li').addClass('current');

jQuery Docs

Answer 2

使用.parent() api执行此操作 Docs 的修改像这样：

$(this).parent().parent().addClass("current")

Answer 3

对我而言似乎正在发挥作用。我只更改了链接中的href，因此它们不会重复，并添加了一些CSS来显示突出显示的元素in this JSFiddle

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

3 个答案: