Javascript CSS转换下拉菜单，应该很简单

我一直在尝试制作这段代码的动画，我知道我无法制作动画：display:none， 所以我试着改变ul的高度，但它不起作用

请帮帮我。。。应该很简单，但我想不出来

谢谢你的回复！：）

document.querySelector（“.menu p”）.onclick=function（）{
设seznam=document.querySelector（“.menu ul”）；
if（seznam.classList.contains（'menu不可见'））{
seznam.classList.remove（'menu_隐形'）；
}否则{
seznam.classList.add（'menu_隐形'）；
}
}

。菜单\u不可见{
显示：无；
}
.菜单{
光标：指针；
}

>>显示下拉菜单
也许它会对你有所帮助。：）

如果您想使用
：hover
触发转换，可以使用纯CSS实现这一点，但下面是一个如何通过单击来实现的示例


document.querySelector（“.menu p”）.onclick=function（）
{
var ul=document.querySelector（'.menu_neviditelne'）.classList.toggle（'active--list'）；
}
。菜单{
最大高度：0；
溢出：隐藏；
过渡：所有400ms缓进缓出；
}
.菜单{
光标：指针；
用户选择：无；
}
.active--列表{
最大高度：500px；
}

>>Zobrazit nabídkuYou说，您试图操纵高度，并且知道您无法设置
display:none的动画
，但是我看到的唯一尝试是您试图在
显示器上执行
转换：all
：none
-您是否可以分享一些涉及
高度的其他非工作尝试？为了设置高度动画，您需要使用
最大高度
和
最大高度
值都需要明确（即不能从
最大高度：0；
设置动画到
最大高度：自动；
）其他尝试的可能重复包括：将ul的高度设置为0，将ul的最大高度设置为0，将idividual li的高度设置为0；此外，我还尝试玩不透明度…这些东西都不起作用…我能够设置不透明度选项的动画，但菜单仍然占用空间…可以单击。。。（我不想要…）我可能会添加一个附加功能：如果显示菜单，获取其高度（以像素为单位），然后再次隐藏它，这种情况在JavaScript中发生得非常快，以至于它实际上不会更新DOM来隐藏/显示它，但您可以获得菜单的实际高度。然后，您可以使用JavaScript设置最大高度。这里的好处是您不会要在CSS中设置任意
500px
，并在每次更改、添加或删除菜单项时进行更新，它将自动设置为正确的高度。
@keyframes example{
    0%{height: 150px;}
    100%{height: 180px;}
}

li a.locations:hover{
    background-color: #e15c00;
     animation-name: example;
     animation-duration: 1s;
}