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

相关推荐
01_ice14 小时前
前端学习css
前端·css·学习
愚公搬代码14 小时前
【愚公系列】《Web应用安全》010-Repeater模块的使用
前端·安全
Cache技术分享15 小时前
503. Java 反射 - 编写 ServiceFactory 类
前端·后端
赵大仁15 小时前
AI 限流 UX 设计:排队、降级、告知与用户预期管理
前端·ai·限流·用户体验·产品设计
__sjfzllv___15 小时前
在职前端Leader学习/转行 AI Agent -DAY37
前端
用户21816970493015 小时前
Flutter (二十二) GlobalKey
前端
用户21816970493015 小时前
Flutter (二十一) 下拉刷新,加载更多
前端
光影少年16 小时前
react navite 内存泄漏:定时器、监听事件、订阅销毁
前端·javascript·react native·react.js·前端框架
breeze jiang16 小时前
Next.js 16 App Router 实战:从 About、Blog 动态路由到全局 404
开发语言·javascript·ecmascript
IT_陈寒16 小时前
Python装饰器把我坑惨了,原来这样用才不掉链子
前端·人工智能·后端