Question

我使用一些jQuery和CSS（显然是HTML）创建了一个具有展开/折叠效果的菜单

我正在使用CSS进行max-height诀窍的转换（目前你用CSS做的事情确实令人难以置信）

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

我不确定我是否特别好解释这一点，所以请看this fiddle of the code I am using（我会在这里粘贴代码，但有很多代码）

我错过了一些明显的东西吗？有没有办法操纵CSS，以便在展开/折叠时不会轻推下面的元素？或者我将不得不放弃并使用jQuery来实现这种效果？

编辑：如果我不清楚我想要实现什么，请参阅右侧菜单here，尝试扩展前两个元素，它不会将其他元素移出的地方。

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/

过渡导致菜单跳转

1 个答案: