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>

如有疑問，歡迎品論區留言！