css - Transition 导致菜单跳转

Question

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

我正在使用 CSS 通过 max-height 技巧进行转换(目前使用 CSS 可以做的事情真的令人难以置信)

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

我不确定我是否解释得特别好，所以请参阅 this fiddle of the code I am using (我会在这里粘贴代码，但是有很多)

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

编辑:如果不清楚我想要实现什么，请查看右侧菜单here , 尝试扩展前两个元素，它不会将其他元素移出位置。

EDIT2:对于任何感兴趣的人，移动是由 max-height 值引起的，如果您将它设置为 100 用于演示，则菜单项不会shift，但是内容被截断并且最小高度较短意味着将来添加菜单项会变得很麻烦。

不幸的是，看起来像将高度从 0 过渡到自动这样简单的事情对于 CSS 过渡来说是不必要的复杂化!

Answer 1

这是您追求的那种东西吗？

$(文档).ready(函数() {

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


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

});

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