当前位置：首页 > JavaScript

js原生实现 toggle

2026-04-07 16:04:18JavaScript

原生JavaScript实现Toggle功能

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

js原生实现 toggle

切换元素的显示/隐藏状态

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

使用classList切换CSS类

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

更通用的Toggle函数

function toggle(selector, property, value1, value2) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(el => {
    const current = el.style[property];
    el.style[property] = current === value1 ? value2 : value1;
  });
}

事件监听示例

<button id="toggleBtn">切换</button>
<div id="content" style="display:none">可切换内容</div>

<script>
  document.getElementById('toggleBtn').addEventListener('click', function() {
    const content = document.getElementById('content');
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  });
</script>

使用data属性存储状态

function toggleWithData(element) {
  const isActive = element.dataset.active === 'true';
  element.dataset.active = !isActive;
  // 根据状态执行相应操作
  if (!isActive) {
    element.classList.add('active');
  } else {
    element.classList.remove('active');
  }
}