VUE 后台框架左侧菜单折叠效果实现超简单

实现方式呢其实也挺简单的，主要自己搞了一天才搞出来，网上看了很多，但是最后还是自己写出来了。

原理：给要显示的子菜单的li添加一个on样式名。然后其他的li都移除样式名on。动画效果是设置最大高度实现的。

代码：

.left ul{padding-top:90px;}
.left li h2{ height:48px; cursor: pointer; font-weight:normal; position:relative; line-height:48px;color:#a1a4a7; font-size: 13px; padding-left:47px; }
.left li a{ display:block; height:48px; line-height:48px; color:#a1a4a7; font-size: 13px;}
.left li h2 span{width:20px; position:absolute; top:50%; left:15px; transform: translateY(-50%); height:16px; background-image:url(../img/menuico.png); background-repeat:no-repeat;}
.left li h2 em{position: absolute; width:48px; -webkit-transition: all 0.3s ease; height:48px; top:0px; right: 10px; border-radius: 50%; background:url(../img/down.png) no-repeat center;}
.left li h2:hover{ color:#fff;}
.left li h2:hover a{ color:#fff;}
.left li.li1 h2{padding-left:0px;}
.left li.li1 h2 a{ padding-left:47px; }
.left li dl{ background: #1d242b; overflow: hidden; max-height:0px; -webkit-transition: max-height 0.1s ease; }
.left li.on dl{ max-height:300px; -webkit-transition: max-height 0.3s ease-out; }
.left li.on h2 em{ transform: rotate(-180deg); }
.left li dl a{ padding-left:47px; position: relative;}
.left li dl a:hover{ color: #fff;}
.left li dl a.on{color:#00aaff;background:#323840;}
.left li dl a.on:after{ width:3px; height: 48px; position: absolute; left:0px; top:0px; content:''; background:#00aaff}

 <ul ref="menu">
        <li class="li1"><h2 class="on"><router-link :to="'/'"><span></span>概览</router-link></h2></li>
        <li class="li2">
          <h2 @click="showMenu(2)"><span></span>订单<em></em></h2>
          <dl>
            <dd><router-link :to="'/'">订单详情</router-link></dd>
            <dd><router-link :to="'/'">退款售后</router-link></dd>
            <dd><router-link :to="'/'">评价管理</router-link></dd>
          </dl>
        </li>
        <li class="li3">
          <h2 @click="showMenu(3)"><span></span>商品<em></em></h2>
          <dl>
            <dd><router-link :to="'/'">商品管理</router-link></dd>
            <dd><router-link :to="'/'">运费设置</router-link></dd>
          </dl>
        </li>
        <li class="li4">
          <h2 @click="showMenu(4)"><span></span>店铺<em></em></h2>
          <dl>
            <dd><router-link :to="'/'">账户管理</router-link></dd>
          </dl>
        </li>
</ul>

<script>
export default {
  data() {
    return {
    }
  },

  methods: {
    showMenu: function(i) {
      for(var a = 1; a <= 4; a++){
        if(a != i){
          this.$refs.menu.getElementsByClassName('li'+a)[0].setAttribute("class",'li'+a);
        }else{          
          if(this.$refs.menu.getElementsByClassName('li'+i)[0].className =='li'+i){            
            this.$refs.menu.getElementsByClassName('li'+i)[0].setAttribute("class",'li'+i+' on');
          }else{
             this.$refs.menu.getElementsByClassName('li'+i)[0].setAttribute("class",'li'+i);
          }
        }
      }      
    }
  }
}
</script>