如何让我的下拉菜单通过动画展开？

Question

我为自己创建了一个菜单。 一切正常，而不是我想添加一些动画以使其看起来更流畅：

 jQuery(document).ready(function () { jQuery(".menu-item-top").click(function (e) { jQuery(this).toggleClass("visible"); }); });

 #mobile_menu { display: block !important; min-height: 100vh; height: 100%; top: 0; right: 0; position: fixed; z-index: 999999; overflow: scroll; border-top: none; padding: 0 0 8px !important; } #mobile_menu li { list-style: none; } #mobile_menu.et_mobile_menu li a { padding: 12px 30px; margin: 0; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; } .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; } .menu-item-top { background: #f9f9f9; color: #fff; padding: 12px 30px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="mobile_menu" class="et_mobile_menu"> <li id="menu-item-199" class="menu-item menu-item-top"><a href="#" aria-current="page">Click to open</a> <ul class="sub-menu"> <li id="menu-item-1424" class="menu-item"><a href="https://google.de" class="has-ripple">Google</a></li> <li id="menu-item-1426" class="menu-item"><a href="https://google.de" class="has-ripple">Google</a></li> </ul> </li> </ul>

那么我现在如何为<ul>下拉菜单设置动画？ 我也想将其向下动画并用动画备份。 我已经尝试了一些东西，但我还不够好让它工作..你能帮我吗？

Answer 1

乔

您可以使用 max-height 属性进行动画处理

喜欢

.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 */
}