jQuery - активная связь и родительские отношения

Question

Я работаю над навигацией для сайта и нуждаюсь в руководстве по динамическому добавлению класса к активной ссылке. Кроме того, как только эта ссылка установлена, и мне нужно вернуться к родителю и сделать так, чтобы он показывался.

Это то, с чем я работаю. Навигация выполнена в стиле аккордеона, но не использует пользовательский интерфейс Accordion.

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