js 实现toggle
使用 classList.toggle 方法
通过 classList.toggle 可以切换元素的类名，适用于样式切换场景：
element.classList.toggle('active-class');该方法会自动检测元素是否包含指定类名：存在则移除，不存在则添加。
使用条件判断实现状态切换
适用于需要自定义逻辑的场景，通过布尔值控制状态：
let isActive = false;
function toggle() {
isActive = !isActive;
element.style.display = isActive ? 'block' : 'none';
}数据属性切换方案
结合HTML5的data-*属性存储状态：
<button data-active="false">Toggle</button>const btn = document.querySelector('button');
btn.addEventListener('click', () => {
const current = btn.dataset.active === 'true';
btn.dataset.active = !current;
});多状态切换实现
适用于需要循环多个状态的场景：
const states = ['off', 'low', 'high'];
let currentIndex = 0;
function rotateToggle() {
currentIndex = (currentIndex + 1) % states.length;
element.className = states[currentIndex];
}封装可复用toggle函数
function toggle(selector, property, values) {
const el = document.querySelector(selector);
const current = el.style[property];
const newValue = current === values[0] ? values[1] : values[0];
el.style[property] = newValue;
}
// 使用示例
toggle('#box', 'display', ['none', 'block']);jQuery实现方案
使用jQuery库时的简化写法：
$('#element').toggle(); // 显示/隐藏切换
$('#element').toggleClass('active'); // 类名切换注意事项
- 考虑添加过渡动画增强用户体验
- 移动端注意触摸事件兼容
- 频繁切换时注意性能优化
- 确保切换操作符合无障碍访问标准
