設定活動狀態中嵌套元素

Question

我有一個基本的嵌套列表如下菜單：

<nav> 
    <ul id="mainNav"> 

     <li><a href="expand-the-sub-menu">Option 1</a> 
      <ul class="navChild"> 
       <li><a href="somewhere">Option 1 Link 1</a></li> 
       <li><a href="somewhere">Option 1 Link 2</a></li> 
       <li><a href="somewhere">Option 1 Link 3</a></li> 
       <li><a href="somewhere">Option 1 Link 4</a></li> 
       <li><a href="somewhere">Option 1 Link 5</a></li> 
      </ul> 
     </li> 

     <li><a href="expand-the-sub-menu">Option 2</a> 
      <ul class="navChild"> 
       <li><a href="somewhere">Option 2 Link 1</a></li> 
       <li><a href="somewhere">Option 2 Link 2</a></li> 
       <li><a href="somewhere">Option 2 Link 3</a></li> 
       <li><a href="somewhere">Option 2 Link 4</a></li> 
       <li><a href="somewhere">Option 2 Link 5</a></li> 
      </ul> 
     </li> 

     <li><a href="somewhere">Option 3</a></li> 
     <li><a href="somewhere">Option 4</a></li> 
     <li><a href="somewhere">Option 5</a></li> 
     <li><a href="somewhere">Option 6</a></li> 
    </ul> 
</nav> 

而且我已經寫了一些條件腳本產生所需的動畫效果，根據當前菜單狀態：

$('#mainNav ul').hide(); 

$('#mainNav>li>a').click(function(){ 
    var elm = this; 

    // If clicked element has a sibling ul with specified class 
    if ($(elm).next().hasClass('navChild')){ 
     // ... & another child ul is already visible 
     if ($('.navChild').is(':visible')){ 
      $('#mainNav ul').fadeOut(300, function() { 
       $(elm).siblings('ul').fadeIn(300); 
      }); 
     // ... & no child ul is visible 
     } else { 
      $('nav').animate({bottom:'60px'},300,function(){ 
       $(elm).next().fadeIn(300); 
      }); 
     } 

    // Else clicked element has no sibling ul with specified class 
    } else { 
     // ... & another child ul is already visible 
     if ($('.navChild').is(':visible')){ 
      $('#mainNav ul').fadeOut(300, function(){ 
       $('nav').animate({bottom:'24px'}); 
      }); 
     // ... & no child ul is visible 
     } else { 
      // Follow link as usual 
     } 
    } 
}); 

代碼可能是醜陋和繁瑣，但它的作品。

我現在要做的是突出顯示當前的菜單項。如果它是頂級<a>標記，那麼應該突出顯示該鏈接。但是，當處於子級<a>標記中時，鏈接和的父鏈接都應突出顯示。另一個需要注意的是，我希望所有的小孩鏈接在點擊父鏈接顯示時處於非活動狀態。

這裏有一個jsFiddle http://jsfiddle.net/pHwgk，幾乎可以工作，如果你顯示，隱藏，然後重新顯示子級<ul>，你應該希望看到我的意思 - 即我不希望它記住它以前的狀態英寸

我希望有人會有一個優雅的解決方案，以節省我可能不必要的大規模編碼。

Answer 1

看看這個：http://jsfiddle.net/adamzr/ku6Yj/

我說：

$('.navChild>li>a').each(function(){ 
    $(this).addClass('off'); 
}); 

每當點擊主級別鏈接到被調用。它會將所有低層鏈接設置爲「關閉」狀態。這應該消除「記憶效應」，並確保在點擊之前顯示子級鏈接。

Answer 2

整理了更好的效果，結果一些不必要的代碼：

http://jsfiddle.net/Madevil/hBVqF/

你不需要.each()到.addClass()或在這種情況下操作。