js 实现的收缩菜单
实现收缩菜单的方法
使用JavaScript实现收缩菜单可以通过多种方式完成，以下是几种常见的方法：
使用classList切换类名
通过添加或移除CSS类来控制菜单的显示与隐藏。HTML结构包含一个按钮和菜单内容，CSS定义隐藏状态的样式，JavaScript通过事件监听切换类名。
<button id="toggleMenu">菜单</button>
<div id="menuContent" class="hidden">
<ul>
<li>选项1</li>
<li>选项2</li>
</ul>
</div>.hidden {
display: none;
}document.getElementById('toggleMenu').addEventListener('click', function() {
document.getElementById('menuContent').classList.toggle('hidden');
});直接操作style属性
通过JavaScript直接修改元素的display属性来实现菜单的收缩与展开。这种方法无需预定义CSS类，直接在脚本中控制样式。
const menu = document.getElementById('menuContent');
document.getElementById('toggleMenu').addEventListener('click', function() {
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});使用slide效果
如果需要更平滑的动画效果，可以通过调整height或结合CSS过渡属性实现滑动效果。初始状态设置height: 0，点击时动态计算内容高度并展开。
#menuContent {
overflow: hidden;
transition: height 0.3s ease;
height: 0;
}const menu = document.getElementById('menuContent');
document.getElementById('toggleMenu').addEventListener('click', function() {
if (menu.style.height === '0px' || !menu.style.height) {
menu.style.height = menu.scrollHeight + 'px';
} else {
menu.style.height = '0';
}
});使用第三方库（如jQuery）
如果项目中已引入jQuery，可以利用其简化的语法快速实现收缩菜单效果。
$('#toggleMenu').click(function() {
$('#menuContent').slideToggle();
});注意事项
- 无障碍性：确保按钮具有
aria-expanded属性，以便屏幕阅读器识别菜单状态。 - 性能优化：频繁操作DOM可能影响性能，建议使用CSS动画而非JavaScript直接操作样式。
- 响应式设计：菜单在不同屏幕尺寸下可能需要适配，可通过媒体查询调整布局。
以上方法可根据具体需求选择，直接操作样式适合简单场景，而动画效果适合需要增强用户体验的情况。
