Vue 实现所有商品分类抽屉式效果(动效)
实现效果:点击分类名,下拉显示子分类,再点击则回收。
如图:
HTML代码:
<template>
<div>
<div style="background-color: #fff;margin:50px 0 0 260px;width:900px;height:900px;padding:50px">
<div>
<ul class="one_ul">
<li class="one_li">
<div>所有分类</div>
</li>
<li class="one_li" v-for="(item,index) in classifyList" :key="index">
<div @click="showTwo(index)">
<i :class="item.switch === true ? 'el-icon-remove' : 'el-icon-circle-plus'" style="margin-right:10px"></i> <!-- 绑定elementui图标 -->
{
{ item.one }}
</div>
<ul :class="item.switch === true ? 'two_show' : 'two_hide'" style