jQuery - 活动链接和父关系

Question

我正在为一个网站进行导航，并且需要一些关于将类动态添加到活动链接的指导。此外，一旦建立了该链接，我需要回溯到父级并让它“显示”。

这就是我正在使用的。导航是手风琴风格，但不使用手风琴用户界面。

<ul id="menu3">
    <li><a href="{site_url}">Home</a></li>
    <li><a class="drop" href="#">Information</a>
        <ul>
            <li><a href="{site_url}information/audio">Audio</a></li>
            <li><a href="{site_url}information/video">Video</a></li>
            <li><a href="{site_url}information/presentations">Presentations</a></li>
        </ul>
    </li>
    <li><a class="drop" href="#">Clinics</a>
        <ul>
            <li><a href="{site_url}clinics/one">Office 1</a></li>
            <li><a href="{site_url}clinics/two">Office 2</a></li>
        </ul>
    </li>
    <li><a href="{site_url}forms/">Forms</a></li>
    <li><a href="{site_url}success_stories/index">Success Stories</a></li>

然后我有一点 jQuery 来初步隐藏子菜单项：

$(function(){
$('ul#menu3 ul').hide();                
$('ul#menu3 > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
   return false;
});

到目前为止一切顺利。一切正常。

现在我想动态突出显示活动链接并尝试使用：

var path = location.pathname.substring(1);
if ( path )
$('ul#menu3 a[href$="' + path + '"]').attr('class', 'selected');

但添加正确的类似乎还不够。

我需要做的最后一件事是让导航对活动组开放。例如，如果 Audio 是当前页面，则导航手风琴的 Information 部分将打开以显示活动链接。

我真的很感激这方面的一些帮助。谢谢。

Answer 1

以下内容对我来说很好。您添加的“选定”代码也按预期工作。内联提供的评论。如果问题仍然悬而未决...评论/提问。

$(function() {
    var pathname = location.pathname;
    var highlight;
    //highlight home
    if(pathname == "/")
        highlight = $('ul#menu3 > li:first > a:first');
    else {
        var path = pathname.substring(1);
        if (path)
            highlight = $('ul#menu3 a[href$="' + path + '"]');
    }
    highlight.attr('class', 'selected');

    // hide 2nd, 3rd, ... level menus
    $('ul#menu3 ul').hide();

    // show child menu on click
    $('ul#menu3 > li > a.drop').click(function() {
        //minor improvement
        $(this).siblings('ul').toggle("slow");
        return false;
    });

    //open to current group (highlighted link) by show all parent ul's
    $('a.selected').parents("ul").show();

    //if you only have a 2 level deep navigation you could
    //use this instead
    //$('a.selected').parents("ul").eq(0).show();
});