js实现菜单折叠
实现菜单折叠的JavaScript方法
使用JavaScript实现菜单折叠功能可以通过DOM操作和事件监听完成。以下是几种常见实现方式：
通过classList切换显示状态
const menuButton = document.querySelector('.menu-button');
const menuContent = document.querySelector('.menu-content');
menuButton.addEventListener('click', () => {
menuContent.classList.toggle('hidden');
});对应的CSS样式：
.hidden {
display: none;
}通过style属性直接修改
document.getElementById('toggleBtn').addEventListener('click', function() {
const menu = document.getElementById('dropdownMenu');
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});使用slide动画效果
function toggleMenu() {
const menu = document.querySelector('.menu');
menu.style.transition = 'all 0.3s ease';
if (menu.style.height === '0px' || !menu.style.height) {
menu.style.height = menu.scrollHeight + 'px';
} else {
menu.style.height = '0px';
}
}结合CSS过渡效果
HTML结构示例：
<button class="toggle-button">菜单</button>
<div class="collapsible-menu">
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>JavaScript控制代码：
const button = document.querySelector('.toggle-button');
const menu = document.querySelector('.collapsible-menu');
button.addEventListener('click', () => {
const isExpanded = menu.getAttribute('aria-expanded') === 'true';
menu.setAttribute('aria-expanded', !isExpanded);
});配套CSS样式：
.collapsible-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.collapsible-menu[aria-expanded="true"] {
max-height: 500px;
}多级菜单实现
对于多级嵌套菜单，可以使用事件委托：
document.querySelector('.menu-container').addEventListener('click', (e) => {
if (e.target.classList.contains('submenu-toggle')) {
e.preventDefault();
const submenu = e.target.nextElementSibling;
submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
}
});注意事项
- 确保为折叠元素添加适当的ARIA属性，如
aria-expanded，增强可访问性 - 移动端考虑添加触摸事件支持
- 动画效果应使用CSS transition而非JavaScript定时器以获得更好性能
- 对于复杂菜单，可以考虑使用
details和summaryHTML原生元素
以上方法可以根据具体需求进行组合和调整，实现不同风格的菜单折叠效果。
