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

相关推荐
可视之道13 小时前
前端图形编辑器的多选框架:从单选到框选到 Shift 连选
前端
3秒一个大13 小时前
JS 数组去重全方案:从基础到通用万能去重函数
前端·javascript
晴天1613 小时前
Electron面试题-Day19
java·javascript·electron
阿黎梨梨13 小时前
读懂一个 Next.js 全栈笔记应用
前端
古茗前端团队13 小时前
代码越改越乱?来试试前端领域模型驱动设计(DDD)
前端·agent·ai编程
Hilaku13 小时前
为什么跳槽涨薪 30% 的时代彻底结束了?聊聊 2026 前端薪资的天花板
前端·javascript·程序员
愚公搬代码13 小时前
【愚公系列】《Web应用安全》006-HackBar插件的使用
前端·安全
超爱吃香菜的菜鸟14 小时前
关于pnpm 部分使用(一)
前端·vue.js
Vuji14 小时前
Pi 插件解剖|git-checkpoint.ts:只用 53 行,让 fork 恢复代码状态
前端·agent
大家的林语冰14 小时前
✌️ 让 Rust 再次伟大,pnpm 12 抛弃 TypeScript,移植 Rust 原地起飞!
前端·javascript·node.js