当前位置：首页 > JavaScript

js原生实现 toggle

2026-02-02 22:16:05JavaScript

原生JavaScript实现Toggle功能

使用原生JavaScript实现toggle效果可以通过多种方式完成，以下是几种常见方法：

切换类名实现显示/隐藏

const element = document.getElementById('targetElement');
element.addEventListener('click', function() {
  this.classList.toggle('active');
});

CSS需配合定义.active样式，例如：

.active {
  display: none;
}

直接修改style属性

const btn = document.querySelector('.toggle-btn');
const box = document.querySelector('.box');

btn.addEventListener('click', function() {
  if (box.style.display === 'none') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

切换布尔值状态

let isVisible = true;
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');

toggleBtn.addEventListener('click', () => {
  isVisible = !isVisible;
  content.style.visibility = isVisible ? 'visible' : 'hidden';
});

自定义数据属性实现

document.querySelector('[data-toggle]').addEventListener('click', (e) => {
  const target = document.querySelector(e.target.dataset.toggle);
  target.hidden = !target.hidden;
});

HTML结构示例：

<button data-toggle="#panel">切换</button>
<div id="panel">可切换内容</div>

实现开关式toggle

const toggleSwitch = document.createElement('input');
toggleSwitch.type = 'checkbox';
toggleSwitch.addEventListener('change', function() {
  console.log(this.checked ? '开启' : '关闭');
});
document.body.appendChild(toggleSwitch);

以上方法可根据具体需求选择使用，类名切换的方式更符合现代前端开发实践，便于维护和扩展样式。直接操作style属性适合简单快速的实现，而数据属性方式则更具语义化。

js原生实现 toggle