[스크립트] 아코디언

아코디언 메뉴 'outerHeight'

 <ul class='gnb'>
  <li>
   <a class="dep1">대메뉴</a>
   <div class="sub">
     <ul>
     <li><a>서브메뉴1</a></li>
     <li><a>서브메뉴2</a></li>
     <li><a>서브메뉴3</a></li>
     <li><a>서브메뉴4</a></li>
     </ul>
   </div>
  </li>
  <li>
   <a class="dep1">대메뉴2</a>
   <div class="sub">
     <ul>
     <li><a>서브메뉴1</a></li>
     <li><a>서브메뉴2</a></li>
     <li><a>서브메뉴3</a></li>
     </ul>
   </div>
  </li>
  <li>
   <a class="dep1">대메뉴3</a>
   <div class="sub">
     <ul>
      <li><a>서브메뉴1</a></li>
     </ul>
   </div>
  </li>
 </ul>

스크립트

 $(function(){
    $('.dep1').click(function(e){
    e.preventDefault();
    링크이동방지
    sub = $(this).sibilngs('.sub');
     클릭한 해당메뉴의 서브메뉴
    h = sub.find('ul').outerHeight();
    해당 서브메뉴의 높이
    if(sub.outerHeight >0){  
       $('.sub').stop().animate({height:0},500)
       해당 sub메뉴를 제외한 나머지 높이가 0이 되어야함
    }else{
       $('.sub').stop().animate({height:0},500)
       해당 sub메뉴를 제외한 나머지 높이가 0이 되어야함
       sub.stop().animate({height:h},500)
       해당 sub메뉴의 높이만큼 메뉴가 열려야함
    }
    }) 
 })