VUX UI折叠面板Cell组件

<template>
  <div>
    <section class="aui-flexView">
      <div class="fund-bogbox">
          <div class="pay-a1">
            <div class="pay-a1-b1" @click="operationList">
             标题
            </div>
            <div class="pay-a1-t2 slide">
             内容内容内容内容内容内容内容内容内容内容内容内容 <br>
              内容内容内容内容内容内容内容内容内容内容内容内容 <br>
            </div>
          </div>
      </div>
    </section>
  </div>
</template>

<script>
    import { Cell,  } from 'vux'
    export default {
        data () {
            return {

            }
        },
        methods: {
            operationList(e){
                //根据点击事件获取当前点击的div元素，获取下一个兄弟元素节点，就是下一个div节点信息
                let thisDom = e.target;//获取到当前点击的元素
                let nextDom = thisDom.nextElementSibling;//获取下一个兄弟元素节点

                //判断该元素class是否存在animate样式，存在则意味该div已展开，否则未展开
                let whethreExistence = nextDom.classList.contains('animate');
                if(whethreExistence){//存在，删除
                    nextDom.classList.remove('animate')
                }else{//不存在，添加
                    nextDom.classList.add('animate');
                }
            },


        },
        components: {
            Cell
        },


    }
</script>

<style scoped>
  @import "../../common/stylus/about.css";
  @import "../../common/stylus/problem.css";



  .slide {
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
  }
  .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
</style>