js实现toggleclass

使用 classList.toggle 方法

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

const element = document.getElementById('myElement');
element.classList.toggle('active');

自定义 toggleClass 函数

如果需要更灵活的实现，可以创建一个自定义的 toggleClass 函数，支持多个类名和多个元素。

function toggleClass(element, className) {
  if (element.classList) {
    element.classList.toggle(className);
  } else {
    const classes = element.className.split(' ');
    const index = classes.indexOf(className);
    if (index >= 0) {
      classes.splice(index, 1);
    } else {
      classes.push(className);
    }
    element.className = classes.join(' ');
  }
}

// 使用示例
const btn = document.getElementById('myButton');
toggleClass(btn, 'highlight');

支持多个类名

扩展自定义函数以支持同时切换多个类名。

function toggleClasses(element, ...classNames) {
  classNames.forEach(className => {
    toggleClass(element, className);
  });
}

// 使用示例
const div = document.getElementById('myDiv');
toggleClasses(div, 'active', 'highlight', 'disabled');

jQuery 实现方式

如果项目中使用了 jQuery，可以直接使用其内置的 toggleClass 方法。

$('#myElement').toggleClass('active');

事件绑定示例

结合事件监听器实现点击切换类名的常见场景。

document.getElementById('toggleButton').addEventListener('click', function() {
  this.classList.toggle('active');
});

动画效果增强

通过添加 CSS 过渡或动画，使类名切换时产生平滑的视觉效果。

.box {
  transition: all 0.3s ease;
}
.box.active {
  background-color: #f00;
  transform: scale(1.1);
}