实现多个菜单或者多个操作按钮一键收起展开

项目中有多个菜单按钮，如果显示成一排时很占位置而且不好看，所以就考虑做成可以收缩起来，使用时在展开，并且加上收起展开动作的动画效果，使其看起来更加自然流畅，效果展示图片如下（结尾有视频效果展示）：

展开时：

收起时：

下面将我实现的代码展示：

html代码片段：

<div class="bottom-operate-container">
        <transition name="slide">
          <div
            class="bottom-operate"
            :style="{ width: showBottomOperate ? '680px' : '0' }"
          >
            <div class="item" @click="enroll">
              <img src="@/assets/images/student/register-audit.png" alt="" />
              <span>注册审核</span>
            </div>
            <div class="item" @click="policyLearn">
              <img src="@/assets/images/student/policy-study.png" alt="" />
              <span>政策学习</span>
            </div>
            <div class="item" @click="exam">
              <img src="@/assets/images/student/exam.png" alt="" />
              <span>理论测评</span>
            </div>
            <div class="item" @click="caseStudy">
              <img src="@/assets/images/student/case.png" alt="" />
              <span>案例介绍</span>
            </div>
            <div class="item" @click="rankReport">
              <img src="@/assets/images/student/rank-report.png" alt="" />
              <span>排名报告</span>
            </div>
            <div class="item" @click="financeReport">
              <img src="@/assets/images/student/finance-report.png" alt="" />
              <span>财务报告</span>
            </div>
            <div class="item" @click="orderView">
              <img src="@/assets/images/student/order-view.png" alt="" />
              <span>订单查看</span>
            </div>
            <div class="item" @click="projectReport">
              <img src="@/assets/images/student/plan-report.png" alt="" />
              <span>规划报告</span>
            </div>
            <div class="item" @click="financeDecision">
              <img src="@/assets/images/student/finance-decision.png" alt="" />
              <span>金融决策</span>
            </div>
          </div>
        </transition>
      </div>
      <div class="unfold" @click="toggle">
        <img
          :src="showBottomOperate ? targetUrlPackUp() : targetUrlUnfold()"
          alt=""
        />
        <span>{{ showBottomOperate ? "收起" : "展开" }}</span>
      </div>

css部分代码：

.bottom-operate-container {
  width: 100%;
  position: absolute;
  bottom: 10%;
}

.bottom-operate {
  display: flex;
  justify-content: space-between;
  margin-right: 42px;
  transition: width 0.6s ease-in;
  overflow: hidden;
  float: right;

  .item {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:last-child {
      padding-right: 42px;
    }

    img {
      width: 60px;
      height: 60px;
    }

    span {
      font-size: 16px;
      color: #ffffff;
      font-weight: 700;
      padding-top: 5px;
      text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.3);
    }
  }
}

.unfold {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;

  img {
    width: 60px;
    height: 60px;
  }

  span {
    font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    padding-top: 5px;
    text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.3);
  }

  position: absolute;
  right: 20px;
  bottom: 10%;
  cursor: pointer;
}

在这里我的菜单位置是放在页面的右下角的，所以使用了定位 （父元素未展示，根据自己需求调整）

js代码部分：

<script setup>
//收起图片
function targetUrlPackUp() {
  return new URL("@/assets/images/student/pack-up.png", import.meta.url).href;
}
//展开图片
function targetUrlUnfold() {
  return new URL("@/assets/images/student/unfold.png", import.meta.url).href;
}

const showBottomOperate = ref(false);
const toggle = () => {
  showBottomOperate.value = !showBottomOperate.value;
  //将该值存到本地存储中，刷新页面时，保持该值
  localStorage.setItem("showBottomOperate", showBottomOperate.value);
};
onMounted(() => {
  //获取本地存储中底部菜单是否展开的值
  const showBottomOperateValue = localStorage.getItem("showBottomOperate");
  if (showBottomOperateValue) {
    showBottomOperate.value = showBottomOperateValue === "true";
  }
});
</script>

视频效果展示：

多个菜单一键展开收起

这个功能的实现其实就是给整个子菜单套上一个父盒子，然后给这个盒子设置一个合适的展开宽度，我这里是690px，关闭时修改为0，然后再加上动画效果，就实现一键收起展开的功能啦。