js原生实现 toggle
原生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属性适合简单快速的实现，而数据属性方式则更具语义化。
