javascript - 访问子页面时使父菜单项加粗

Question

我有以下代码，它为菜单项提供了一个“当前”类。然后我用font-weight:Bold;

$(document).ready(function () {
    var loc = window.location.href;
    $("ul a").each(function() {
        if (loc.indexOf($(this).attr("href")) != -1) {
            $(this).addClass("current");
        }
    });
});

如果用户位于子菜单中的页面上，ul li a我如何Bold在根级别添加一个调用父 UL/LI 的类？

这是结构，如果我在 Q&Z 集团，那么关于我们需要大胆。- http://jsfiddle.net/zZQy3/

Answer 1

您正在寻找父母：

$(this).parent("li").parent("li").addClass("bold");

请注意上面有两个父母 - 这是因为您的 a 元素在 li 内，这不是您想要的粗体。您希望 li 的父级加粗。

Answer 2

如果您将当前节点作为 jquery 变量，则可以使用parent. 所以，你可以使用$(this).parent().addClass(...);

如果你愿意，而不是使用 javascript 来实现这个逻辑，你可以使用选择器：

$('ul li:has(a[href=' + window.location.href + '])').addclass(...);

这是通过Has和Attribute Equals选择器查找具有与当前 url 匹配的 href 的后代的任何 LI。

Answer 3

var loc = window.location.href;
$("ul a").each(function() {
    if (loc.indexOf($(this).attr("href")) != -1) {
        $(this).addClass("current");
        $(this).parent('li').parent('ul').addClass("Bold");
    }
});