Vue实现侧边菜单栏手风琴效果实例代码

前端之家收集整理的这篇文章主要介绍了Vue实现侧边菜单栏手风琴效果实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图如下所示:

Box">
{ // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false if (i.isSubShow !== this.menuList[ind].isSubShow) { i.isSubShow = false; } }); item.isSubShow = !item.isSubShow; console.log(item.name) },} }
$menuBackColor:#f1f1f1; $menuListH2:#8fbfef; .asideBox{ height: 100%; width: 300px; aside{ background: $menuBackColor; height: 100%; .asideMenu{ .oneMenu{ height: 50px; line-height: 50px; font-size: 18px; font-weight: normal; color: #ffffff; background: $menuListH2 url("../assets/images/icon-open.png") no-repeat 280px center; border-bottom: 1px solid #669cd9; img{ width: 20px; height: 20px; margin: 15px 16px 15px 20px; vertical-align: top; } } .oneMenuChild{ padding: 0 20px 0 60px; height: 40px; line-height: 40px; background: $menuBackColor; border-bottom: 1px solid #ffffff; color: #454343; font-size: 18px; } } } }

总结

以上所述是小编给大家介绍的Vue实现侧边菜单栏手风琴效果实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章