在子页面上将父项标记为活动

【问题标题】：Marking parent item as active when on child page在子页面上将父项标记为活动
【发布时间】：2011-05-03 21:57:43
【问题描述】：

我有一个由父级别的 LI 元素组成的导航栏。每个包含子页面的部分都嵌入了另一个无序列表。在查看子元素的页面时，子 LI 获得了“活动”类，但父 LI 没有。如何使用 jQuery 或 CSS 将活动类分配给父项？

【问题讨论】：

你能发布一些你的 HTML 并在特定的 ID 或类中讨论吗？
至少包含一些代码会非常有帮助。

【解决方案1】：

使用closest() 它选择与选择器匹配的最近的父级。因此，如果您的子元素有几个元素深，它仍然会找到正确的父元素，而不是 .parent() 仅抓取直接父元素或 .parents() 抓取所有父元素直到您的选择器。

$('.child').closest('.parent').addClass('active');

【讨论】：

应该是$('.child.active')。

【解决方案2】：

它仍处于测试阶段，所以我不知道您是否已经在使用 jQuery UI 菜单（或者您是否还没有使用任何 JavaScript）？但是，对于jQuery UI Menu，是这样的：

function activate_parent(e, u){
    $("#ui-active-menuitem").parents("li").filter(function(i){
        return !($(this).closest("ul").hasClass(".ui-menu-flyout"));
    }).find("a").addClass(".ui-state-hover");
    return;
}

$("#menu").menu({
    'focus': activate_parent
});

【讨论】：