使用 javascript 突出显示父菜单项答案

【问题标题】：Highlight parent menu item using javascript使用 javascript 突出显示父菜单项
【发布时间】：2014-05-15 07:18:04
【问题描述】：

当我点击父菜单项时，它会突出显示下拉菜单中的所有子菜单项，我该如何解决。

javascript：

$(function () {
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $('[href$="' + url + '"]').parents("li").addClass("current_menu_item");
});

css:

#menu ul .current_menu_item a /* highlight current menu */
{
    color: Yellow;
}

html:

<div id="menu">
    <ul>
        <li><a href="/Services.aspx" class="top_parent" title="Our services">Services</a>
            <ul>
                <li><a href="/Design.aspx">Design</a></li>
                <li><a href="/Construction.aspx">Construction</a></li>
                <li><a href="/Refurbishment.aspx">Refurbishment</a></li>
            </ul>
        </li>
        <li><a href="/Experience.aspx" title="Our experience">Experience</a></li>
        <li><a href="/Ourwork.aspx" title="Our previous work">Our Work</a></li>
        <li><a href="/Contact.aspx" title="Contact us">Contact</a></li>
        <li><a href="/About.aspx" title="About us">About</a></li>
    </ul>
</div>

当我点击一个下拉菜单项时，它会突出显示其父菜单项和我所有的下拉菜单项，就像这样（黄色是突出显示，蓝色是悬停）：

如何使用 javascript 去除下拉菜单项的高亮显示，或高亮显示父菜单和选定的下拉菜单项。

【问题讨论】：

标签： javascript html asp.net css drop-down-menu

【解决方案1】：

这一行.parents("li") 是定位所有父母li，但您只需要第一个。

所以用closest()改成：

$(function () {
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $('[href$="' + url + '"]').closest("li").addClass("current_menu_item");
});

和最接近的在线测试：http://jsfiddle.net/56fqd/
与父母：http://jsfiddle.net/56fqd/1/

【讨论】：

【解决方案2】：

您可以使用子选择器> 仅定位作为.current_menu_item 的直接子元素的a 元素

将#menu ul .current_menu_item a 更改为#menu ul .current_menu_item > a

【讨论】：

在 5 分钟内，它不允许我这样做