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

相关推荐
Jackson__7 分钟前
AI时代,前端开发者到底还剩下什么?又该往哪里走?
前端·ai编程
C澒28 分钟前
微前端容器标准化:容器标准化演进
前端·架构
卖报的大地主30 分钟前
Learn Claude Code Agent 开发 | 2、插拔式工具系统:扩展功能不修改核心循环
前端·chrome
我是伪码农38 分钟前
14届蓝桥杯
javascript·css·css3
qzhqbb1 小时前
Web 服务器(Nginx、Apache)
服务器·前端·nginx
天若有情6731 小时前
前端进阶必看:吃透这些高阶知识,告别CRUD,迈向高级前端工程师
前端·状态模式
装不满的克莱因瓶1 小时前
React Native vs Flutter:一次深入到底的性能对比分析(含原理 + 实战)
javascript·flutter·react native·react.js·app·移动端
coderYYY1 小时前
git push报错Authentication failed for ‘xxx’也不会弹要求输入用户名密码的最终解决方法
前端·git·gitee·github
l1t2 小时前
QWen 3.5plus总结的总结基准测试结果的正确方法
前端·数据库
gCode Teacher 格码致知2 小时前
Javascript及Python提高:将对象的键值对转换为数组元素的方式以及两种语言的对比-由Deepseek产生
javascript·python