變導致菜單跳到

Question

我創建使用一些jQuery和CSS（顯然HTML）與展開/摺疊效果菜單

我使用的CSS與max-height招的轉變（這真的是令人難以置信的是，你現在可以用CSS做什麼）

無論如何，如果你點擊一個父菜單項，它應該展開顯示它的子項，並同時關閉任何其他擴展列表。這個效果很好，但是它會引起跳躍效果，從而使它下面的元素髮生變化。

我不知道如果我解釋這個特別好，所以請參閱this fiddle of the code I am using（我會在這裏粘貼代碼，但有相當多的）

我失去的東西在這裏很明顯？有沒有一種方法來操縱CSS，以便在展開/摺疊時不會使下面的元素微移？或者我將不得不放棄並使用jQuery來實現這種效果？

編輯：如果目前還不清楚我想達到的目標，請參閱右側菜單here，嘗試擴大前兩個元素，它並沒有其他人轉移出來的地方。

EDIT2：任何有興趣，換擋是通過max-height值造成的，如果你把它設置爲100的演示，然後在菜單項不轉移，但內容被切斷並具有短MIN-高度意味着將來添加菜單項變得相當繁重。

不幸的是，它看起來像一個簡單的事情，從0到高度的過渡從CSS過渡到不必要的複雜！

Answer 1

這是你之後的事情嗎？

$（文件）。就緒（函數（）{

$('div.accordionButton').click(function() { 
    $('div.accordionContent').slideUp('normal');  
    $(this).next().slideDown('normal'); 
}); 


$("div.accordionContent").hide(); 

}）;

http://jsfiddle.net/ma9ic/zR5aY/2/