vue css菜单收缩

1、实现点击按钮菜单收起再点击菜单展开

通过Vue.js的isMenuOpen变量来控制菜单的显示状态，点击"Toggle Menu"按钮时，会触发toggleMenu方法来改变isMenuOpen的值，从而切换菜单的展开和收起状态。同时，使用CSS中的transition属性来实现平滑的过渡效果

<div id="app">
  <button @click="toggleMenu">Toggle Menu</button>
  <div class="menu" :class="{ 'menu-open': isMenuOpen }">
    <!-- 菜单内容 -->
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    isMenuOpen: false
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
})

.menu {
  width: 0;
  height: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

.menu-open {
  width: 200px; /* 菜单展开时的宽度 */
  height: auto; /* 如果菜单内容高度可变，使用auto来适应内容 */
}

2、点击按钮菜单向上收缩再点击菜单向下展开

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <div class="menu" :class="{ 'collapsed': isCollapsed }">
      <!-- 菜单内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
    };
  },
  methods: {
    toggleMenu() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>

<style>
.menu {
  height: auto;
  transition: height 0.3s;
}

.collapsed {
  height: 0;
  overflow: hidden;
}
</style>