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

相关推荐
今天又在摸鱼2 分钟前
学习vue前必要的js语法
前端·vue.js·学习
小小张自由—>张有博10 分钟前
【深度解析】从 claude 命令到 cli.js 的完整执行链路
开发语言·javascript·ecmascript
仰泳的熊猫29 分钟前
题目2584:蓝桥杯2020年第十一届省赛真题-数字三角形
数据结构·c++·算法·蓝桥杯
大家的林语冰31 分钟前
TypeScript 6 官宣,JS “最后之舞“,版本升级踩雷指南
前端·javascript·typescript
英俊潇洒美少年33 分钟前
react useDeferredvalue和useTransition的讲解
前端·react.js·前端框架
爱学习的程序媛37 分钟前
【WebRTC】呼叫中心前端技术选型:SIP.js vs JsSIP vs Verto
前端·javascript·typescript·音视频·webrtc·实时音视频·web
Amumu121381 小时前
Js: ES新特性(一)
开发语言·前端·javascript
scofield_gyb1 小时前
Redis 6.2.7安装配置
前端·数据库·redis
木斯佳1 小时前
前端八股文面经大全: 蓝色光标前端一面OC(2026-03-23)·面经深度解析
前端·面试·vue·校招·js·面经
2301_792580001 小时前
Pyrocko + PSGRN/PSCMP小问题
前端