jQuery：同級別刪除類

Question

我有3個級別的導航。如果你點擊其中一個鏈接，它將根據等級獲得一個類名。等級1將具有類別名稱「active1」，等級2「active2」，等級3「active3」。

我設法在點擊時獲得類名，但其他類名在被點擊後立即被刪除。

該計劃是..如果我點擊第一級的鏈接，第二級將顯示，如果我點擊第二級的鏈接，第三級將顯示。

我該如何解決這個問題？

HTML：

<div id="nav"> 
<ul class="first"> 
    <li><a href="#" title="Nav" class="active">Link</a> 
     <ul class="second"> 
      <li><a href="#" title="Sub Nav">Link 2</a> 
       <ul class="third"> 
        <li><a href="#" title="Sub Nav 2">Link 3</a></li> 
        <li><a href="#" title="Sub Nav 2">Link 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#" title="Sub Nav">Link 2</a></li> 
      <li><a href="#" title="Sub Nav">Link 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#" title="Nav">Link</a></li> 
    <li><a href="#" title="Nav">Link</a></li> 
    <li><a href="#" title="Nav">Link</a></li> 
</ul></div> 

JS/jQuery的

$('.first a').click(function() { 
    if ($(this).hasClass('active')) { 
     return false; 
    } else if ($(this).not('active')) { 
     $('.first').find('.active').removeClass('active'); 
     $(this).addClass('active'); 
    } 
    return false; 
}); 

$('.second a').click(function() { 
    if ($(this).hasClass('active2')) { 
     return false; 
    } else if ($(this).not('active2')) { 
     $('.second').find('.active2').removeClass('active2'); 
     $(this).addClass('active2'); 
    } 
    return false; 
}); 

$('.third a').click(function() { 
    if ($(this).hasClass('active3')) { 
     return false; 
    } else if ($(this).not('active3')) { 
     $('.second').find('.active3').removeClass('active3'); 
     $(this).addClass('active3'); 
    } 
    return false; 
}); 

Answer 1

像這樣DEMO： JS

$('#nav').on('click', 'a', function(){ 
var nextul = ($(this).closest('li').children('ul')); 
nextul.toggle('slow'); 
}); 

CSS

.second, .third {display:none;} 
.active{display:block;}