當點擊導航菜單鏈接時用javascript對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/

我編輯你的代碼一點點，我加了jQuery選擇「動畫」

$("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') 
     } 
    } 
});