使用javascript突出显示父菜单项

Question

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

的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删除下拉菜单项中的突出显示，或突出显示父菜单和选定的下拉菜单项。

Answer 1

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

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

Answer 2

此行.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/