js实现菜单折叠
实现菜单折叠的JavaScript方法
使用JavaScript实现菜单折叠功能可以通过操作DOM元素的classList或style属性来控制显示和隐藏。以下是几种常见方法：
基础DOM操作实现
通过切换CSS类或直接修改样式：
const menu = document.getElementById('menu');
const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('hidden'); // 切换CSS类
// 或直接修改样式
// menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});对应的CSS样式：
.hidden {
display: none;
}
/* 或使用过渡动画 */
.menu {
transition: height 0.3s ease;
}
.menu.collapsed {
height: 0;
overflow: hidden;
}使用数据属性跟踪状态
通过HTML5的data-*属性存储状态：
const menu = document.querySelector('[data-menu]');
const toggleBtn = document.querySelector('[data-toggle]');
toggleBtn.addEventListener('click', () => {
const isExpanded = menu.dataset.expanded === 'true';
menu.dataset.expanded = !isExpanded;
menu.style.maxHeight = isExpanded ? '0' : '500px';
});带动画效果的实现
使用CSS过渡实现平滑动画：
function toggleMenu() {
const menu = document.querySelector('.menu');
if (menu.style.maxHeight) {
menu.style.maxHeight = null;
} else {
menu.style.maxHeight = menu.scrollHeight + 'px';
}
}响应式实现
结合媒体查询和JavaScript：
function checkScreenSize() {
const menu = document.getElementById('menu');
if (window.innerWidth < 768) {
menu.classList.add('collapsible');
menu.classList.remove('expanded');
} else {
menu.classList.remove('collapsible');
menu.classList.add('expanded');
}
}
window.addEventListener('resize', checkScreenSize);注意事项
- 确保为折叠元素设置
overflow: hidden以避免内容溢出 - 考虑添加ARIA属性增强可访问性：
<button aria-expanded="false" aria-controls="menu">Toggle</button> <div id="menu" aria-hidden="true">...</div> - 移动端设备可能需要处理触摸事件
- 对于复杂菜单，建议使用CSS transforms而不是
height动画以获得更好性能
以上方法可以根据具体需求组合使用，现代前端框架如React/Vue通常会使用组件状态管理折叠状态，但核心原理仍然类似。
