web蓝桥杯真题:折叠手风琴

代码及注释:

javascript 复制代码
const options = document.querySelectorAll('.option')
options.forEach((item1, index, arr) => {    //循环每个元素都绑定点击事件
    item1.addEventListener('click', () => { 
        arr.forEach(item2 => {      //先把所有元素的active类名删掉
            item2.classList.remove('active')
        })
        item1.classList.add('active')    //给点击元素添加active类名
    })
})

知识点:

1.排他思想口诀:先干到所有人,再复活自己

2.添加元素:element.classList.add('类名')

3.删除元素:element.classList.remove('类名')

4.数组循环array.forEach((item, index, arr) => { })

相关推荐
金梦人生14 分钟前
UniApp + Vue3 + TS 工程化实战笔记
前端·微信小程序
海云前端115 分钟前
移动端 CSS 十大避坑指南 熬夜总结的实战解决方案
前端
海云前端116 分钟前
20 个浏览器原生能力 替代工具库少写百行代码
前端
Holin_浩霖16 分钟前
🌿 Fiber 异步渲染机制 & 时间切片原理详解
前端
烟袅17 分钟前
深入浏览器渲染流程:从 HTML/CSS/JS 到 60FPS 的视觉魔法
前端·css·html
有点笨的蛋18 分钟前
JavaScript 执行机制深度解析:编译、执行上下文、变量提升、TDZ 与内存模型
前端·javascript
jump68019 分钟前
ts的范性
前端
_一两风19 分钟前
深入理解JavaScript执行机制:从一道经典面试题说起
javascript
阿凡达蘑菇灯21 分钟前
langgraph---条件边
开发语言·前端·javascript
San3022 分钟前
深入理解浏览器渲染流程:从HTML/CSS到像素的奇妙旅程
javascript·css·html