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

<template>   <div class="asideBox">    <aside>     <ul class="asideMenu">      <li v-for="(item,index) in menuList">       <div class="oneMenu" @click="showToggle(item,index)">        <img v-bind:src="item.imgUrl" />        <span>{{item.name}}</span>       </div>       <ul v-show="item.isSubShow">        <li v-for="subItem in item.subItems">         <div class="oneMenuChild">{{subItem.name}}</div>        </li>       </ul>      </li>     </ul>    </aside>   </div> </template> 

export default {   data(){    return{     menuList:[      {       name:'字符录入',       imgUrl:require('../assets/images/icon-character.png'),       isSubShow:false,       subItems:[        {         name:'字符录入'        },        {         name:'白话文录入'        },        {         name:'文言文录入'        },        {         name:'小写数字录入'        }       ]      },      {       name:'票据数据录入',       imgUrl:require('../assets/images/icon-bill.png'),       isSubShow:false,       subItems:[        {         name:'票据录入'        },        {         name:'翻打传票'        },       ]      },      {       name:'交易码录入',       imgUrl:require('../assets/images/icon-transaction.png'),       isSubShow:false,       subItems:[        {         name:'交易码录入'        },        {         name:'交易名称录入'        },       ]      },      {       name:'操作码录入',       imgUrl:require('../assets/images/icon-operation.png'),       isSubShow:false,       subItems:[        {         name:'操作码录入'        },        {         name:'操作名称录入'        },       ]      },      {       name:'票据学习',       imgUrl:require('../assets/images/icon-billearn.png'),       isSubShow:false,       subItems:[       ]      },      {       name:'内部凭证学习',       imgUrl:require('../assets/images/icon-voucher.png'),       isSubShow:false,       subItems:[       ]      },      {       name:'现金管理学习',       imgUrl:require('../assets/images/icon-cash.png'),       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)    },   }  } 

<style lang="scss" scoped>  $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;     }    }   }  } </style>