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

相关推荐
object not found14 小时前
WooCommerce 接入 KPay 后订单完成页不显示订单信息:returnUrl 动态参数问题解决
前端·wordpress·独立站支付
yume_sibai14 小时前
04-Nginx部署实战完全指南(前端部署 + 后端代理 + 监控告警 + 故障排查)
运维·前端·nginx
data analyse 45614 小时前
数据合规的同意记录怎么留存?
前端·人工智能·数据分析
linux_cfan14 小时前
videojs v10 源代码系列解读:35 · HLS 解析器:multivariant 与 media playlist
前端·javascript·音视频
IT_陈寒14 小时前
Redis键过期失效?这个坑我踩得明明白白
前端·人工智能·后端
web打印社区14 小时前
汽修 / 4S 店:维修工单、结算单网页怎么静默出纸
开发语言·前端·javascript·chrome·ecmascript
liangshanbo121515 小时前
Webpack的分包策略面试题
前端·webpack·node.js
ttwuai15 小时前
Golang Web后台管理框架推荐:Gin、GoFrame与数据面板项目怎么分
前端·golang·gin
广州华水科技15 小时前
北斗GNSS变形监测系统在水库安全监测中的应用与优势
前端