jQuery - Active Link и родственные отношения

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

Следующие просто отлично подходят для меня. Также ваш добавленный «выбранный» код работает так, как ожидалось. Комментарии предоставлены inline. Если вопрос остается открытым ... комментировать/спрашивать.

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