当前位置：首页 > VUE

vue实现折叠菜单

2026-03-08 10:00:07VUE

实现折叠菜单的基本思路

使用Vue的动态组件和条件渲染特性，结合CSS过渡效果实现折叠菜单功能。核心是通过v-show或v-if控制子菜单的显示/隐藏，搭配点击事件切换状态。

数据准备

在Vue组件的data中定义菜单结构和展开状态：

data() {
  return {
    menus: [
      {
        title: '菜单1',
        isOpen: false,
        children: [
          { title: '子菜单1-1' },
          { title: '子菜单1-2' }
        ]
      },
      {
        title: '菜单2',
        isOpen: false,
        children: [
          { title: '子菜单2-1' },
          { title: '子菜单2-2' }
        ]
      }
    ]
  }
}

模板结构

<div class="menu-container">
  <div 
    v-for="(menu, index) in menus"
    :key="index"
    class="menu-item"
  >
    <div 
      class="menu-title"
      @click="toggleMenu(menu)"
    >
      {{ menu.title }}
      <span class="arrow">{{ menu.isOpen ? '▼' : '▶' }}</span>
    </div>

    <transition name="slide">
      <div v-show="menu.isOpen" class="submenu">
        <div 
          v-for="(subItem, subIndex) in menu.children"
          :key="subIndex"
          class="submenu-item"
        >
          {{ subItem.title }}
        </div>
      </div>
    </transition>
  </div>
</div>

切换逻辑

methods: {
  toggleMenu(menu) {
    menu.isOpen = !menu.isOpen
  }
}

过渡样式

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}

.slide-enter, .slide-leave-to {
  max-height: 0;
  opacity: 0;
}

.menu-title {
  cursor: pointer;
  padding: 10px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
}

.submenu-item {
  padding: 8px 15px;
  background: #fff;
}

使用第三方库

对于更复杂的需求，可以考虑使用现成的Vue组件库：

Element UI：el-menu组件内置折叠功能

<el-menu :collapse="isCollapse">
<el-submenu index="1">
 <template slot="title">导航1</template>
 <el-menu-item index="1-1">选项1</el-menu-item>
</el-submenu>
</el-menu>

Ant Design Vue：a-menu组件支持折叠

<a-menu mode="inline" :inline-collapsed="collapsed">
<a-sub-menu key="sub1">
 <span slot="title">导航1</span>
 <a-menu-item key="1">选项1</a-menu-item>
</a-sub-menu>
</a-menu>