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) => { })

相关推荐
cxxcode14 小时前
Vite 热更新(HMR)原理详解
前端
HelloReader14 小时前
Tauri 架构从“WebView + Rust”到完整工具链与生态
前端
UIUV15 小时前
node:child_process spawn 模块学习笔记
javascript·后端·node.js
Bigger15 小时前
告别版本焦虑:如何为 Hugo 项目定制专属构建环境
前端·架构·go
烛阴16 小时前
Three.js 零基础入门:手把手打造交互式 3D 几何体展示系统
javascript·webgl·three.js
颜酱16 小时前
单调栈:从模板到实战
javascript·后端·算法
代码匠心16 小时前
AI 自动编程:一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong18 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode18 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户54330814419418 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端