当前位置：首页 > JavaScript

Js实现 toggle

2026-02-01 15:42:02JavaScript

使用 classList.toggle 方法

通过 classList.toggle 可以轻松切换元素的类名。该方法接受一个类名作为参数，如果元素已存在该类名则移除，不存在则添加。

const button = document.querySelector('.toggle-button');
button.addEventListener('click', () => {
  document.querySelector('.target-element').classList.toggle('active');
});

使用 data-* 属性存储状态

当需要跟踪更复杂的状态时，可以使用 data-* 属性来存储当前状态值。

const toggleBtn = document.getElementById('toggle-btn');
toggleBtn.addEventListener('click', function() {
  const isActive = this.getAttribute('data-active') === 'true';
  this.setAttribute('data-active', !isActive);
  document.querySelector('.content').style.display = isActive ? 'none' : 'block';
});

实现多状态切换

对于需要循环多个状态的切换，可以维护一个状态数组和当前索引。

let currentIndex = 0;
const states = ['state1', 'state2', 'state3'];
const element = document.querySelector('.multi-state');

document.querySelector('.toggle-multi').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % states.length;
  element.className = `multi-state ${states[currentIndex]}`;
});

使用 CSS 变量实现样式切换

通过修改 CSS 变量值来实现动态样式切换。

const root = document.documentElement;
const toggleBtn = document.querySelector('.theme-toggle');

toggleBtn.addEventListener('click', () => {
  const currentTheme = getComputedStyle(root).getPropertyValue('--main-color');
  root.style.setProperty('--main-color', currentTheme === '#333' ? '#fff' : '#333');
});

实现无障碍 toggle

为屏幕阅读器添加适当的 ARIA 属性。

const toggleButton = document.querySelector('.aria-toggle');
toggleButton.addEventListener('click', function() {
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
  document.getElementById('dropdown').hidden = expanded;
});

使用 Proxy 实现响应式 toggle

通过 Proxy 对象创建响应式的状态管理。

const state = new Proxy({ isOpen: false }, {
  set(target, property, value) {
    target[property] = value;
    document.querySelector('.panel').classList.toggle('open', value);
    return true;
  }
});

document.querySelector('.proxy-toggle').addEventListener('click', () => {
  state.isOpen = !state.isOpen;
});

实现动画过渡效果

结合 CSS 过渡实现平滑的切换效果。

Js实现 toggle

const animatedToggle = document.querySelector('.animate-toggle');
animatedToggle.addEventListener('click', () => {
  const box = document.querySelector('.animated-box');
  box.style.transform = box.style.transform === 'translateX(100px)' 
    ? 'translateX(0)' 
    : 'translateX(100px)';
});