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

  <div class="asideBox">  <ul class="asideMenu"> <li> <div class="oneMenu"> <span>{{item.name}}</span></div><ul> <li> <div class="oneMenuChild">{{subItem.name}}</div></li></ul></li></ul></aside></div>

 export default { data(){ return{ menuList:[ { name:'字符录入', imgUrl:require('../assets/images/icon-character.png-600'), isSubShow:false, subItems:[ { name:'字符录入' }, { name:'白话文录入' }, { name:'文言文录入' }, { name:'小写数字录入' } ] }, { name:'票据数据录入', imgUrl:require('../assets/images/icon-bill.png-600'), isSubShow:false, subItems:[ { name:'票据录入' }, { name:'翻打传票' }, ] }, { name:'交易码录入', imgUrl:re<i>本文来源gaodai$ma#com搞$代*码网2</i>quire('../assets/images/icon-transaction.png-600'), isSubShow:false, subItems:[ { name:'交易码录入' }, { name:'交易名称录入' }, ] }, { name:'操作码录入', imgUrl:require('../assets/images/icon-operation.png-600'), isSubShow:false, subItems:[ { name:'操作码录入' }, { name:'操作名称录入' }, ] }, { name:'票据学习', imgUrl:require('../assets/images/icon-billearn.png-600'), isSubShow:false, subItems:[ ] }, { name:'内部凭证学习', imgUrl:require('../assets/images/icon-voucher.png-600'), isSubShow:false, subItems:[ ] }, { name:'现金管理学习', imgUrl:require('../assets/images/icon-cash.png-600'), isSubShow:false, subItems:[ ] }, ] } }, methods:{ // 点击展开折叠菜单事件 showToggle:function(item,ind){ this.menuList.forEach(i => { // 判断如果数据中的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-600") 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; } } } }