JS实现折叠/展开的手风琴效果

需求场景：如下图

 

 点击红框文字，实现部分form表单项的折叠和展开，效果见下图

 

 

 

 其中，绿色框中的内容时需要实现展开/折叠的

直接上代码

<template>
  <view>
    <view class="collapse" id="collapse">
      <!-- 业务代码。。。。 -->
    </view>
    <view @click="showMore">
      <u-icon
        :name="openFlag ? 'arrow-up' : 'arrow-down'"
        size="28"
        style="margin-right: 4rpx"
      ></u-icon>
      {{ openFlag ? "收起" : "展开" }}更多信息
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      defaultHeight: 0,
      openFlag: false,
    };
  },
  methods: {
    // 展开其他信息
    showMore() {
      let liCon = document.getElementById("collapse");
      let height = liCon.offsetHeight;
      if (height === this.defaultHeight) {
        // 展开
        liCon.style.height = "auto";
        height = liCon.offsetHeight;
        liCon.style.height = this.defaultHeight + "px";
        let f = document.body.offsetHeight; // 必加
        liCon.style.height = height + "px";
      } else {
        // 收缩
        liCon.style.height = this.defaultHeight + "px";
      }
      this.openFlag = !this.openFlag;
    },
  },
};
</script>

<style lang="scss" scoped>
.collapse {
  height: 0px;
  overflow: hidden;
  transition: height 0.3s;
}
</style>

如有疑问，欢迎品论区留言！