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

相关推荐
陈_杨7 分钟前
鸿蒙开发-疾阅App阅读训练功能技术解析
前端·javascript
zhangxingchao10 分钟前
AI应用开发八:RAG相关技术总结
前端·人工智能·后端
凌涘25 分钟前
依托 BEM 规范深度剖析 WeUI 微信按钮组件开发与实现
前端·微信
不好听61326 分钟前
Node.js 工程化开发流程 — 知识点总结
javascript·node.js
小KK_28 分钟前
CSS浮动布局指南:从文档流到BFC
前端·css·html
ZengLiangYi1 小时前
sql.js WASM 深度解析
javascript·数据库·后端
Hommy881 小时前
【剪映小助手】音频处理接口
前端·音视频·剪映小助手·视频剪辑自动化
KaMeidebaby1 小时前
卡梅德生物技术快报|蛋白翻译后修饰:YAP/TAZ 分子调控机制与靶向干预技术
前端·人工智能·物联网·百度·新浪微博
JustHappy1 小时前
古法编程秘籍(三):为什么需要函数?因为程序员讨厌重复劳动
前端·javascript·后端
weixin_397574091 小时前
AgentRAG与ReAct推理链:从检索增强到推理增强
前端·react.js·前端框架