Vue列表的展开与收起（H5）

1.列表展开之前，如图：

2.列表展开之后，如图

3.某一项内容展开之后，如图

4.收起展开效果可绑定class,判断状态之后，选择特定的css样式;其中数据是循环出来，模拟动态数据；代码如下:

<template>
  <div class="analysisMajor-wrap">
    <!--    列表-->
    <div class="first-level-heading">
      <div :class="[showAllCourseInfo?'':'min-height-flag']">
        <div :class="[showAllCourseInfo?'unfold-height':'fold-height']">
          <ul class="course">
            <li class="first-head">
              <p class="th1">列表1</p>
              <p class="th2">列表2</p>
            </li>
            <li v-for="(item,index) in courseDataList" :key="index" class="inner-text">
              <div class="course-all">
                <p class="course-name">{{ item.title }}</p>
                <p class="course-type">
                  <span>{{ item.type }}</span>
                  <van-icon name="arrow-down" class="first-i" @click="showCourseInfoList($event)" />
                </p>
              </div>
              <div v-for="(it,index) in item.courseDetails" :key="index" class="td-details">
                <p>
                  <span>内容1：</span>
                  <span>{{ it.knowledgeNum }}</span>
                </p>
                <p>
                  <span>内容1：</span>
                  <span>{{ it.courseType }}</span>
                </p>
                <p class="claim-major">
                  <span>内容1：</span>
                  <span>{{ it.requirement }}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="mask" />
        <div class="show-more" @click="showAllCourseInfoList()">
          <span>{{ showAllCourseInfo?'收起':'展开' }}</span>
          <van-icon :name="[showAllCourseInfo?'arrow-up':'arrow-down']" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'ProfessionalAnalysis',
  props: ['about'],
  data() {
    return {
      showCourseInfo: false,
      showAllCourseInfo: false,
      courseDataList: [
        {
          'title': 'title1',
          'type': 'content1',
          courseDetails: [{
            'knowledgeNum': '信息1',
            'courseType': '信息1',
            'requirement': '信息1'
          }]
        },
        {
          'title': 'title2',
          'type': 'content2',
          courseDetails: [{
            'knowledgeNum': '信息1',
            'courseType': '信息1',
            'requirement': '信息1'
          }]
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        },
        {
          'title': 'title1',
          'type': 'content1'
        }
      ]
    }
  },
  methods: {
    //列表项----点击展开收起
    showCourseInfoList(e) {
      const target = e.currentTarget
      // 寻找父元素的兄弟元素进行显示与隐藏控制
      $(target).parents('.course-all').siblings().toggle()
      // 切换样式-图标
      $(target).toggleClass('second-i')
    },
    // 整个列表展开收起
    showAllCourseInfoList() {
      $('show-more').css('color', '#2fcbfe')
      this.showAllCourseInfo = !this.showAllCourseInfo
    }
  }
}
</script>

<style scoped lang="less">
.analysisMajor-wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .first-level-heading {
        height: auto;
        margin-top: -19px;
        padding: 0 15px;
        i {
            color: #2fcbfe;
            font-size: 8px;
        }
        h3 {
            font-size: 12px;
            color: #333333;
            display: inline-block;
            margin-left: 10px;
        }
        // 课程建设表格
        .maskInfo {
          width: 100%;
        }
        .min-height-flag{
          position: relative;
          .mask{
            position: absolute;
            bottom:26px;
            width: 100%;
            height: 150px;
            z-index: 20;
            background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);
            background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);
            background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);
            background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);
          }
        }
        .fold-height-flag{
          position: relative;
        }
        .fold-height {
          max-height: 355px;
          overflow: hidden;
        }
        .unfold-height {
          height: auto;
        }
        .course-table, .fold-height,.unfold-height  {
            margin-top:20px;
            ul {
                li {
                    height: 30px;
                    line-height: 30px;
                }
                .first-head {
                    font-size: 11px;
                    color: #666666;
                    border-bottom: 2px solid #cacaca;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    line-height: 30px;
                    .th1 {
                        width: 3.83rem;
                        padding-left: 40px;
                        text-align: left;
                        float: left;
                    }
                    .th2 {
                        width: 2.77rem;
                        text-align: center;
                        float: right;
                    }
                }
                .inner-text {
                    width: 100%;
                    border-bottom: 1px solid #e9e9e9;
                    min-height: 30px;
                    height: auto;
                    .course-all {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        /*line-height: 15px;*/
                        p, span {
                            height: 30px;
                            font-size: 11px;
                            color: #868686;
                        }
                        .course-name {
                            width: 3.83rem;
                            min-height: 30px;
                            height: auto;
                            display: inline;
                            word-break: break-all;
                            word-wrap:break-word;
                        }
                        .course-type {
                            text-align: right;
                            width: 2.77rem;
                            .first-i {
                                color: #a9a9a9;
                                margin-left: 17px;
                                font-size: 11px;
                                margin-right: 6px;
                            }
                            .second-i {
                              color: #a9a9a9;
                              margin-left: 17px;
                              font-size: 11px;
                              margin-right: 6px;
                              transform:rotate(180deg);
                              -ms-transform:rotate(180deg); 	/* IE 9 */
                              -moz-transform:rotate(180deg); 	/* Firefox */
                              -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
                              -o-transform:rotate(180deg);
                            }
                        }
                    }
                    .td-details {
                        height: 128px;
                        background-color: #f8f8f8;
                        padding: 0 9px;
                        display: none;
                        p {
                            font-size: 11px;
                            color: #666666;
                            line-height: 30px;
                        }
                        .claim-major {
                            padding-bottom: 24px;
                        }
                    }
                }
            }
        }
        .show-more {
            height: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                font-size: 9px;
                color: #666666;
                text-align: center;
            }
            i {
                font-size: 9px;
                color: #666666;
                margin-left: 5px;
            }
        }
    }
}
</style>