转换会导致菜单跳转

Question

我使用一些jQuery和CSS(显然还有HTML)创建了一个具有扩展/折叠效果的菜单

我正在使用CSS进行max-height技巧的转换(现在你能用CSS做什么真的很不可思议)

无论如何，如果您单击父菜单项，它应该展开以显示其子菜单项，同时关闭任何其他展开的列表。这是完美的，但它会产生跳跃效果，使其下方的元素发生移动。

我不确定我是否解释得特别好，所以请看我正在使用的这段代码(我会在这里粘贴代码，但有很多)

我是不是遗漏了一些显而易见的东西？有没有一种方法可以操作CSS，使其在展开/折叠时不会轻推下面的元素？还是我将不得不屈服并使用jQuery来实现这种效果？

编辑：如果不清楚我想要实现什么，请参阅此处的右手菜单，尝试扩展前两个元素，不会使其他元素移位。

EDIT2:对于任何感兴趣的人来说，偏移是通过max-height值引起的，如果您为演示将其设置为100，则菜单项不会偏移，但内容会被切断，并且最小高度较短意味着将来添加菜单项会变得相当繁重。

不幸的是，它看起来像从0到auto的高度转换这样简单，但CSS转换却不必要地复杂！

Answer 1

这就是你想要的东西吗？

$(document).ready(function)｛

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

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

})；​

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