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를

이 DEMO처럼

$('.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

: JS

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

CSS

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