js原生实现 toggle
原生JavaScript实现Toggle功能
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');
}
}注意事项
- 考虑添加过渡动画增强用户体验
- 对于频繁切换操作，建议使用classList而非直接修改style
- 确保toggle操作不会影响页面可访问性
- 对于复杂状态管理，可能需要维护额外的状态变量
