0

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

我正在使用 CSS 进行过渡max-height（现在你可以用 CSS 做的事情真的令人难以置信）

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

我不确定我是否解释得特别好，所以请看我正在使用的代码的这个小提琴（我会在这里粘贴代码，但有很多）

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

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

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

不幸的是，它看起来像将高度从 0 转换为 auto 这样简单的事情在 CSS 转换中是不必要的复杂！

4

1 回答 1

1

这是你所追求的吗？

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

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


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

});​</p>

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

于 2012-12-12T16:12:43.290 回答