当前位置：首页 > JavaScript

js实现菜单折叠

2026-01-30 14:38:50JavaScript

使用CSS和JavaScript实现菜单折叠

通过CSS隐藏菜单，再通过JavaScript切换显示状态。这种方法简单直接，适合基础需求。

<style>
  .menu { display: none; }
  .menu.active { display: block; }
</style>

<button id="toggleBtn">切换菜单</button>
<ul class="menu" id="menu">
  <li>项目1</li>
  <li>项目2</li>
</ul>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  const menu = document.getElementById('menu');

  toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
  });
</script>

添加过渡动画效果

为菜单折叠添加平滑的动画过渡，提升用户体验。使用CSS transition属性实现。

<style>
  .menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .menu.active {
    max-height: 500px;
  }
</style>

使用jQuery实现

如果项目中已引入jQuery，可以使用更简洁的语法实现菜单折叠功能。

$('#toggleBtn').click(function() {
  $('#menu').slideToggle();
});

响应式设计实现

结合媒体查询，在不同屏幕尺寸下自动控制菜单的折叠状态。

@media (max-width: 768px) {
  .menu { display: none; }
  .menu.active { display: block; }
}

使用Vue.js实现

在Vue.js框架中，可以利用v-show指令轻松实现菜单折叠功能。

<template>
  <div>
    <button @click="toggleMenu">切换菜单</button>
    <ul v-show="isMenuVisible">
      <li>项目1</li>
      <li>项目2</li>
    </ul>
  </div>
</template>

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

使用React实现

在React组件中，通过状态管理控制菜单的显示与隐藏。

import React, { useState } from 'react';

function Menu() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        切换菜单
      </button>
      {isVisible && (
        <ul>
          <li>项目1</li>
          <li>项目2</li>
        </ul>
      )}
    </div>
  );
}

保存菜单状态到本地存储

将菜单的折叠状态保存到localStorage，保持用户偏好。

// 保存状态
localStorage.setItem('menuCollapsed', 'true');

// 读取状态
const isCollapsed = localStorage.getItem('menuCollapsed') === 'true';

可访问性优化

为菜单添加ARIA属性，提升屏幕阅读器的兼容性。

<button 
  id="toggleBtn" 
  aria-expanded="false" 
  aria-controls="menu"
>
  切换菜单
</button>

<script>
  toggleBtn.addEventListener('click', () => {
    const expanded = menu.classList.toggle('active');
    toggleBtn.setAttribute('aria-expanded', expanded);
  });
</script>

js实现菜单折叠