手风琴纵向收缩内容简单实现

今天在项目中有一项需求是将大面积的内容折叠起来通过箭头收缩

找了很多资料框架啊、插件啊、等等，后来参考了大神们的一些写法写出了一个我认为是最简单的写法，记录一下，备用

我用的是vue+ts

罗列部分主要代码

HTML代码：

<ul style="list-style-type:none">
    <li class="allContents">
        <div v-on:click="itemClick">
            <h2 v-if="!showCheckBox" style="display: inline;">Collapse Title</h2>
            <span
                :class="{' ui_up  rightArrow':showCheckBox,'icon ui_down rightArrow':!showCheckBox}"></span>
        </div>
        <div v-show="showCheckBox">
            <h2>Title</h2>
            <div>
                <input type="checkbox" v-model="allFiltersSelected" />
                <label class="checkbox-inline no-left-padding">1</label>
            </div>
            <div>
                <input type="checkbox" v-model="allFiltersSelected" />
                <label class="checkbox-inline no-left-padding">2</label>
            </div>
            <div>
                <input type="checkbox" v-model="allFiltersSelected" />
                <label class="checkbox-inline no-left-padding">3</label>
            </div>
            <div>
                <input type="checkbox" v-model="allFiltersSelected" />
                <label class="checkbox-inline no-left-padding">4</label>
            </div>
            <div>
                <input type="checkbox" v-model="allFiltersSelected" />
                <label class="checkbox-inline no-left-padding">ALL</label>
            </div>
        </div>
    </li>
</ul>

CSS样式：

.allContents{
    margin-bottom: 30px;
    cursor: pointer;
}

.rightArrow{
    float: right;
    font-size: 25px;
    color:grey-0;
}

Vue 代码：

 showCheckBox:boolean = false;
  itemClick(){
    this.showCheckBox = !this.showCheckBox;
  }

效果截图（内容少所以不是很明显）：

当点击箭头后：

此外，：class属性运用到了上次说的style通过运算符的写法，是类似的写法，如果不想让排序中的<ul><li>不显示前面的点，需要在<ul>标签上添加属性“style=“list-style-type:none””

完结撒花！如有不足欢迎指出！