jQuery - 活动链接和父关系

Question

我正在开发一个网站的导航，需要一些有关动态地将类添加到活动链接的指导。此外，一旦建立了该链接，我需要引用回父级并让它“显示”。

这就是我正在做的工作。导航是手风琴样式，但不使用手风琴 UI。

<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');

但它似乎不足以添加正确的类。

我需要做的最后一件事是向活动组打开导航。例如，如果音频是当前页面，则导航折叠面板的信息部分将打开以显示活动链接。

我真的很感激对此的一些帮助。谢谢。

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