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

相关推荐
用户69371750013845 小时前
前阵子刷屏的 Ox-Alpha 真身揭晓!GLM-5.3-Flash 上线,这价格真的杀疯了
前端·后端·github
四千岁5 小时前
抓包LangChain-了解LangChain的原理
前端·javascript·后端
南雨北斗5 小时前
TS方式构建Vue3 toast组件(一)
前端
IT小白杨5 小时前
2026游戏工作室环境隔离指南:从设备指纹到移动IP的部署实践
前端·经验分享·网络协议·tcp/ip·游戏·安全架构·指纹浏览器
用户298698530145 小时前
使用 JavaScript 在 React 中实现 Word 转 PDF
前端·javascript·react.js
悟空瞎说5 小时前
UICollectionViewLayout 全套源码 + 逐行中文注释 + 使用场景说明
javascript
hunterandroid5 小时前
[鸿蒙从零到一] @Observed 与 @ObjectLink 深层响应陷阱与最佳实践
前端
hunterandroid5 小时前
[鸿蒙从零到一] ArkTS 装饰器原理与自定义装饰器实践
前端
hunterandroid5 小时前
ContentProvider 跨进程数据共享实战
android·前端
计算机魔术师6 小时前
飞书与豆包合并后首款Agent产品"豆包工作"发布
前端