Js实现 toggle
实现 toggle 功能的方法
在 JavaScript 中实现 toggle 功能通常用于切换元素的显示状态、类名或其他属性。以下是几种常见的实现方式：
切换类名
element.classList.toggle('className');该方法会在元素上添加或移除指定的类名，取决于该类名是否存在。
切换显示/隐藏
element.style.display = element.style.display === 'none' ? 'block' : 'none';通过检查当前 display 属性值来切换显示状态。
自定义 toggle 函数
function toggle(element, property, value1, value2) {
element.style[property] = element.style[property] === value1 ? value2 : value1;
}这个通用函数可以切换任何 CSS 属性的两个不同值。
事件监听中的 toggle
button.addEventListener('click', () => {
div.classList.toggle('active');
});为按钮添加点击事件来切换目标元素的类名。
使用数据属性存储状态
function toggleWithData(element) {
const isActive = element.dataset.active === 'true';
element.dataset.active = !isActive;
element.style.backgroundColor = isActive ? 'white' : 'blue';
}利用 data-* 属性来存储和检查当前状态。
多个元素切换
document.querySelectorAll('.toggle-item').forEach(item => {
item.addEventListener('click', function() {
this.classList.toggle('active');
});
});为多个元素添加 toggle 功能，每个元素独立切换。
这些方法可以根据具体需求选择使用，classList.toggle() 是最简洁的内置方法，而自定义函数则提供了更大的灵活性。
