Js实现 toggle

实现 toggle 功能的方法

在 JavaScript 中实现 toggle 功能通常用于切换元素的显示状态、类名或其他属性。以下是几种常见的实现方式：

切换类名

element.classList.toggle('className');

该方法会在元素上添加或移除指定的类名，取决于该类名是否存在。

切换显示/隐藏

element.style.display = element.style.display === 'none' ? 'block' : 'none';

通过检查当前 display 属性值来切换显示状态。

自定义 toggle 函数

function toggle(element, property, value1, value2) {
  element.style[property] = element.style[property] === value1 ? value2 : value1;
}

这个通用函数可以切换任何 CSS 属性的两个不同值。

事件监听中的 toggle

button.addEventListener('click', () => {
  div.classList.toggle('active');
});

为按钮添加点击事件来切换目标元素的类名。

使用数据属性存储状态

function toggleWithData(element) {
  const isActive = element.dataset.active === 'true';
  element.dataset.active = !isActive;
  element.style.backgroundColor = isActive ? 'white' : 'blue';
}

利用 data-* 属性来存储和检查当前状态。

多个元素切换

document.querySelectorAll('.toggle-item').forEach(item => {
  item.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

为多个元素添加 toggle 功能，每个元素独立切换。

这些方法可以根据具体需求选择使用，classList.toggle() 是最简洁的内置方法，而自定义函数则提供了更大的灵活性。