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

相关推荐
圣殿骑士-Khtangc1 小时前
Go字符串高效拼接性能对比与底层原理分析
服务器·前端·golang
BigTopOne2 小时前
【ijkplayer】 硬解码流程
前端
kyriewen2 小时前
DeepSeek Harness开源第一天我就上手了——和Claude Code的差距比想象中大
前端·ai编程·deepseek
捡田螺的小男孩3 小时前
什么是 Skill?手把手带你写一个简单有用的 Skill!
前端·后端·程序员
IT_陈寒3 小时前
Redis集群这个坑,差点让我通宵
前端·人工智能·后端
90后的晨仔3 小时前
uni-app 路由跳转与页面导航 —— 终极详解(对标 iOS / Android / 鸿蒙三端原生)
前端
Heo3 小时前
大厂前端调试不能只会debugger
前端·javascript·面试
用户2181697049304 小时前
Flutter (十七) 网络请求
前端
cidy_984 小时前
React 19 + Vite 企业级前端项目:从零搭建到规范交付
前端
用户921080262864 小时前
如何把一张图片做成自定义复杂 UI 图标
前端