以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感。
现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。
看下效果图:
点开效果:
其实原理比较简单,就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。
子菜单的样式:
.tree-son-menu{
background-color: #FFF;
.menu-body {
z-index: 20;
position: relative;
color: #5f5f5f;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height .3s;
transition: max-height .3s;
}
&.open .menu-body {
max-height: 600px;
-webkit-transition: max-height .5s;
transition: max-height .5s
}
&.two-level{
.row-item{
.row-left{
padding-left: .8rem;
}
}
}
}
关键语句,子菜单的body默认样式
max-height: 0;
-webkit-transition: max-height .3s;
transition: max-height .3s;
当子菜单追加open样式后,子菜单的body样式:
&.open .menu-body {
max-height: 600px;
-webkit-transition: max-height .5s;
transition: max-height .5s
}
然后通过点击事件来实现子菜单的样式open的切换,则就轻松实现了菜单的收缩和展开了。
$(".tree-son-menu").toggleClass('open');
以上所述是小编给大家介绍的vue实现收缩展开详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。