以前做這種操作就是簡單的display：block，但現(xiàn)在用戶的要求也越來越高，需要美觀和動畫感。
現(xiàn)在介紹用一種簡單的方式來實現(xiàn)子菜單從上向下展開子菜單。
看下效果圖：
點開效果：
其實原理比較簡單，就是通過子菜單的 max-height: 0;和 max-height: 2000px來實現(xiàn)子菜單的顯示和關(guān)閉。加上css3的 transition: max-height .3s;來實現(xiàn)動畫效果。
子菜單的樣式：
.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; } } } }關(guān)鍵語句，子菜單的body默認(rèn)樣式
max-height: 0; -webkit-transition: max-height .3s; transition: max-height .3s;
當(dāng)子菜單追加open樣式后，子菜單的body樣式：
&.open .menu-body { max-height: 600px; -webkit-transition: max-height .5s; transition: max-height .5s }然后通過點擊事件來實現(xiàn)子菜單的樣式open的切換，則就輕松實現(xiàn)了菜單的收縮和展開了。
$(".tree-son-menu").toggleClass('open');以上所述是小編給大家介紹的vue實現(xiàn)收縮展開詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
