Javascript 如何使用动画使下拉列表展开？

我为自己制作了一份菜单。所有的工作都很好，而不是我想添加一点动画，使它看起来更像烟雾：

jQuery（文档）.ready（函数（）{
jQuery（“.菜单项顶部”）。单击（函数（e）{
jQuery（this）.toggleClass（“可见”）；
});
});
#移动菜单{
显示：块！重要；
最小高度：100vh；
身高：100%；
排名：0；
右：0；
位置：固定；
z指数：999999；
溢出：滚动；
边界顶部：无；
填充：0 0 8px！重要；
}
#移动菜单{
列表样式：无；
}
#mobile_menu.et_mobile_menu li a{
填充：12px 30px；
保证金：0；
-webkit过渡：全部。4s易入易出；
-o-transition：全部。4s易于输入输出；
过渡：全部。4s轻松进出；
}
.et_移动菜单ul.子菜单{
显示：无！重要；
可见性：隐藏！重要；
}
.et_mobile_菜单.可见>ul子菜单{
显示：块！重要；
可见性：可见！重要；
}
.菜单项顶部{
背景#f9f9f9；
颜色：#fff；
填充：12px 30px；
}








Jo

可以使用“最大高度”属性设置动画

像

几分钟前，我在这里回答了同样的问题：@kukkuz将此添加到我的示例中。你会发现这破坏了一切。看你的例子。父元素仍然和子元素一样高。现在，当我把它插入到我的示例中时，我可以删除下拉列表，因为它不再有意义了。空间仍然存在，但内容已消失。请参阅下拉列表大小取决于内容，并且内容可以更改。因此，在这种情况下，这不是一个好的解决方案。你不必写精确的高度，但要写列表的最大值。例如，你可以把它设为1000像素，但可以减少动画时间……试试看。动画是从左到右的，这很奇怪。
.et_mobile_menu ul.sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease-in-out;
}

et_mobile_menu .visible > ul.sub-menu {
    max-height: 200px; /* adjust it according to drop-down size */
}