当前位置：首页 > JavaScript

js原生实现 toggle

2026-03-15 22:40:41JavaScript

原生 JavaScript 实现 Toggle 功能

Toggle 功能通常指在两种状态之间切换，例如显示/隐藏元素、切换类名、改变样式等。以下是几种常见的实现方式：

切换元素的显示/隐藏

通过修改 display 属性实现元素的显示和隐藏切换：

function toggleDisplay(elementId) {
  const element = document.getElementById(elementId);
  if (element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

切换 CSS 类名

通过 classList.toggle() 方法添加或移除类：

function toggleClass(elementId, className) {
  document.getElementById(elementId).classList.toggle(className);
}

切换布尔值状态

实现一个简单的布尔值切换：

let isToggled = false;

function toggleState() {
  isToggled = !isToggled;
  console.log('Current state:', isToggled);
}

切换多个选项

实现多个选项之间的切换：

let currentOption = 1;
const totalOptions = 3;

function toggleOption() {
  currentOption = currentOption % totalOptions + 1;
  console.log('Current option:', currentOption);
}

切换元素属性

修改元素的属性值，例如 disabled：

function toggleAttribute(elementId, attribute) {
  const element = document.getElementById(elementId);
  const current = element.getAttribute(attribute);
  element.setAttribute(attribute, current === 'true' ? 'false' : 'true');
}

切换事件监听器

动态添加或移除事件监听器：

js原生实现 toggle

function toggleEventListener(elementId, eventType, handler) {
  const element = document.getElementById(elementId);
  let isListening = false;

  return function() {
    if (isListening) {
      element.removeEventListener(eventType, handler);
    } else {
      element.addEventListener(eventType, handler);
    }
    isListening = !isListening;
  };
}

这些方法可以根据具体需求进行组合和扩展，实现更复杂的 toggle 功能。