访问子页面时使父菜单项加粗答案

【问题标题】：make parent menu item bold when visiting child page访问子页面时使父菜单项加粗
【发布时间】：2012-04-23 13:46:28
【问题描述】：

我有以下代码，它为菜单项提供了一个“当前”类。然后我用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 内的页面上，我如何在根级别向父 UL/LI 添加一个名为 Bold 的类？

这是结构，如果我在 Q&Z 集团，那么 About us 需要加粗。 - http://jsfiddle.net/zZQy3/

【问题讨论】：

菜单的 HTML 结构是什么？您是否尝试将 'Bold' 类应用到父元素到 $('ul a')，就像您上面的函数一样？
这是结构，如果我在 Q&Z 集团，那么 About us 需要加粗。 - jsfiddle.net/zZQy3
@MarkWalters，我正在尝试将课程添加到ul.sf-menu li ul li a

标签： javascript jquery

【解决方案1】：

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

【讨论】：

这只会加粗直接父级，它已经添加了 current 的类。粗体应应用于下一个父 li 元素。
这是结构，如果我在 Q&Z 集团，那么 About us 需要加粗。 - jsfiddle.net/zZQy3

【解决方案2】：

您正在寻找parent：

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

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

【讨论】：

但是parent() 只前往第一父母，而不是祖父母。 li 不能是 li 的直系子级。

【解决方案3】：

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

如果您愿意，可以使用selector：

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

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

【讨论】：

这只会加粗直接父级，它已经添加了 current 的类。粗体应应用于下一个父 li 元素。
如果你想要父母的父母作为cale_b的建议，使用$(this).parent().parent().addclass()或$('ul li:has(li a[href=' + window.location.href + '])')