js实现菜单折叠
使用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>
