以前这个操作只是简单的显示：块，现在用户的要求越来越高，需要美观和动画。

现在，介绍一种从上到下扩展子菜单的简单方法。

看效果图：

点击效果：

其实原理比较简单，就是通过子菜单的max-height : 0；和max-height: 2000px来显示和关闭子菜单。添加css3 transition:最大高度. 3s；来实现动画效果。

子菜单的样式：树子菜单{背景色： # FFF；菜单-正文{ z-index : 20；相对位置：color: # 5f5f5f飞越：隐藏；max-height : 0；-web kit-transit :最大高度. 3s；transition:最大高度. 3s；} .打开。菜单-正文{ max-height : 600 px；-WebKit-transit :最大高度. 5s；transition:最大高度. 5s }。两级{。行项目{。row-left { padding-left : 8 rem；}}}} key语句，子菜单正文的默认样式

max-height : 0；-web kit-transit :最大高度. 3s；transition:最大高度. 3s；当打开样式附加到子菜单时，子菜单的主体样式：打开。菜单-正文{ max-height : 600 px；-WebKit-transit :最大高度. 5s；Transition:最大高度. 5s}然后点击事件切换子菜单样式打开，这样菜单就可以轻松收缩和扩展。

$('.树子菜单’)。toggle class(' open ')；以上就是边肖介绍的vue收缩的详细解释和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！