js实现toggle
实现元素显示/隐藏切换（Toggle）
通过JavaScript实现元素的显示和隐藏切换功能，以下是几种常见方法：
方法1：使用classList.toggle() 通过添加/移除CSS类控制显示状态：
const element = document.getElementById('target');
const button = document.getElementById('toggleBtn');
button.addEventListener('click', () => {
element.classList.toggle('hidden');
});对应CSS：
.hidden {
display: none;
}方法2：直接操作style属性 动态修改元素的display属性：
document.getElementById('toggleBtn').addEventListener('click', function() {
const el = document.getElementById('target');
el.style.display = el.style.display === 'none' ? 'block' : 'none';
});方法3：存储状态变量 使用变量记录当前状态：
let isVisible = true;
document.getElementById('toggleBtn').addEventListener('click', function() {
const el = document.getElementById('target');
isVisible = !isVisible;
el.style.visibility = isVisible ? 'visible' : 'hidden';
});实现CSS属性切换
切换多个CSS属性值（如颜色、尺寸等）：
const button = document.querySelector('.theme-toggle');
button.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});对应CSS：
body {
background: white;
color: black;
}
body.dark-theme {
background: #222;
color: white;
}实现状态标记切换
切换按钮文本或图标：
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', function() {
this.textContent = this.textContent === '展开' ? '收起' : '展开';
});注意事项
- 优先使用classList方式而非直接操作style，便于维护
- 考虑添加过渡动画增强用户体验
- 移动端注意touch事件兼容性
- 频繁操作DOM时建议使用requestAnimationFrame
