DIV 접기/펼치기 탐색 메뉴 링크 클릭시

Question

현재 아래 코드는 사용자가 메뉴 항목을 클릭 할 때마다 DIV를 펼칩니다 (동일한 링크에서 여러 번 클릭하면 동일한 번호를 접고 펼칩니다. 그러나 접힌 채로 닫히지 않습니다.)

사용자가 동일한 메뉴 항목 링크에서 두 번째 클릭하면 DIV가 접히고 이렇게 유지됩니다. 본 웹 사이트처럼

편집 :

이

현재 프로세스가 : 네비게이션 메뉴 링크를

• 한 번의 클릭으로 열립니다가 (전개 나는 실현 위 그래서 요약, 명확하지 않을 수도 있습니다) 연관 DIV
• DIV 을 숨기고 (접기) 자동으로 다시 열기

원하는 새로운 프로세스 : 네비게이션 메뉴 링크를

• 한 번의 클릭으로 열립니다 (전개) 관련 DIV
• 같은 탐색 링크 가죽 (주름)이 DIV 에 한 번 더 클릭 그리고 그게 다야. DIV는 사용자가 동일한 링크 또는 다른 메뉴 항목을 다시 클릭 할 때까지 접힌 상태로 유지됩니다.

어떻게하면됩니까? 많은 감사

참조 http://jsfiddle.net/u3qtt6fo/5/

JS :

$("a").click(function() { 
    var page = $(this).data("page"); 
    var active = $(".fold.active"); 

    // if there is visible fold element on page (user already clicked at least once on link) 
    if(active.length) { 
     $(".fold.active") 
     .animate({ width: "0" }, 200) 
     .animate({ height: "0" }, 200, function() { 
     // this happens after above animations are complete 
     $(this).removeClass("active") 

     $("#"+page) 
     .addClass("active") 
     .animate({ height: "500px" }, 1000, 'linear') 
     .animate({ width: "500px" }, 400,'linear')  


     }) 

    // clicking for the first time 
    } else { 
     $("#"+page) 
     .addClass("active") 
     .animate({ height: "500px" }, 1000,'linear') 
     .animate({ width: "500px" }, 400,'linear') 

    } 
}); 

HTML

<div id="fold1" class="fold">Div menu item 1</div> 
<div id="fold2" class="fold">Div menu item 2</div> 
<div id="fold3" class="fold">Div menu item 3</div> 
<div id="fold4" class="fold">Div menu item 4</div> 

<nav> 
    <ul> 
    <li><a href="#" data-page="fold1">Menu item 1</a></li> 
    <li><a href="#" data-page="fold2">Menu item 2</a></li> 
    <li><a href="#" data-page="fold3">Menu item 3</a></li> 
    <li><a href="#" data-page="fold4">Menu item 4</a></li> 
    </ul> 
</nav> 

CSS :

.fold { 
    display: none; 
    width: 0; 
    height: 0; 
} 

.fold.active { 
    display: inline-block; 
} 

#fold1 { 
    border: solid 5px #bada55; 
    background: red; 
} 

#fold2 { 
    border: solid 5px #fed900; 
    background: aqua; 
} 

#fold3 { 
    border: solid 5px #223322; 
    background: green; 
} 

#fold4 { 
    border: solid 5px #55bada; 
    background: purple; 
} 

ul { 
    position: absolute; 
    top: 50px; 
    right: 50px; 
    list-style-type: none; 
} 

Answer 1

이 당신이 필요로 무엇입니까?

http://jsfiddle.net/u3qtt6fo/11/은 내가 당신의 대답을

$("a").click(function() { 
    var page = $(this).data("page"); 
    if ($('div:animated').id != page) { 
     var active = $(".fold.active"); 

     // if there is visible fold element on page (user already clicked at least once on link) 
     if (active.length) { 
      active.animate({ 
      width: "0" 
      }, 200) 
       .animate({ 
       height: "0" 
      }, 200, function() { 
       // this happens after above animations are complete 
       $(this).removeClass("active"); 
      }) 
     // clicking for the first time 
     } else { 
      $("#" + page) 
       .addClass("active") 
       .animate({ 
       height: "500px" 
      }, 1000, 'linear') 
       .animate({ 
       width: "500px" 
      }, 400, 'linear') 
     } 
    } 
});