js 实现toggle
实现 Toggle 功能的几种方法
在 JavaScript 中实现 toggle 功能可以通过多种方式完成，以下是一些常见的方法：
使用 classList.toggle()
const element = document.getElementById('myElement');
element.addEventListener('click', () => {
element.classList.toggle('active');
});这种方法通过切换 CSS 类名来改变元素状态，是最简洁的实现方式。
使用布尔值切换
let isActive = false;
const button = document.querySelector('button');
button.addEventListener('click', () => {
isActive = !isActive;
button.textContent = isActive ? 'ON' : 'OFF';
});这种方法使用变量存储状态，适合需要复杂逻辑控制的场景。
使用 data-attribute
const toggleBtn = document.querySelector('[data-toggle]');
toggleBtn.addEventListener('click', function() {
const currentState = this.getAttribute('aria-pressed') === 'true';
this.setAttribute('aria-pressed', !currentState);
});这种方法结合 ARIA 属性，提高了可访问性。
切换显示/隐藏
const content = document.getElementById('content');
document.getElementById('toggleBtn').addEventListener('click', () => {
content.style.display = content.style.display === 'none' ? 'block' : 'none';
});这种方法直接操作样式属性，适合简单的显示/隐藏切换。
使用自定义事件
class Toggle {
constructor(element) {
this.element = element;
this.state = false;
element.addEventListener('click', this.toggle.bind(this));
}
toggle() {
this.state = !this.state;
this.element.dispatchEvent(new CustomEvent('toggle', { detail: this.state }));
}
}
const myToggle = new Toggle(document.getElementById('toggleElement'));
myToggle.element.addEventListener('toggle', (e) => {
console.log('Toggle state:', e.detail);
});这种方法封装了 toggle 逻辑，适合复杂组件开发。
注意事项
- 考虑可访问性，确保 toggle 元素有适当的 ARIA 属性
- 移动设备上可能需要处理触摸事件
- 动画过渡可以提升用户体验
- 性能考虑，避免频繁的 DOM 操作
以上方法可以根据具体需求选择使用，classList.toggle() 是最简单直接的实现方式，而自定义事件方法则提供了更好的扩展性。
