토글 슬라이딩 메뉴에 애니메이션 적용

Question

저는 페이스 북 모바일 메뉴와 비슷한 방식으로 동작하는 메뉴를 만들고 있습니다. 내 진도를 여기에서 찾을 수 있습니다 - http://jsfiddle.net/923GK/

나는 그것이 기본 상태로 접혀 지길 원합니다. 그러면 누군가가 "대시 보드"라고 말하면 대시 보드의 하위 목록이 표시됩니다. 대시 보드를 다시 클릭하면 기본 닫힘 상태로 다시 전환됩니다. 그러나 보조 메뉴가 열려 있고 "블로그"메뉴를 클릭하면 다시 닫히지 않고 환상적인 전환없이 블로그 하위 메뉴 만 표시됩니다.

나는 여러 해 동안 노력해 왔지만이 일을하기위한 각 시도는 이전보다 더 많은 혼란으로 끝납니다. jquery에서 더 숙련 된 사람이라면 한 번 들여다 볼 수 있으면 감사 할 것입니다.

Answer 1

var last, elm = $('#menu'); 

$('.secondary').hide(); 
elm.css('width', 100); 

$('#menu li a').on('click', function(e) { 
    e.preventDefault(); 
    if (elm.width()>100) { 
     if (last == this) { 
      elm.animate({width: elm.width()<340?350:100}); 
     }else{ 
      $(this).next('.secondary').show(); 
      $(last).next('.secondary').hide(); 
     } 
    }else{ 
     $(this).next('.secondary').show(); 
     elm.animate({width: elm.width()<340?350:100});  
    } 
    last = this; 
}); 

FIDDLE