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 分钟前
手机悬屏翻译工具外语游戏漫画APP全覆盖
android·前端·javascript·python·游戏·pdf·html
支支დ9 分钟前
Phind 前端特定优势:AI 编程助手的体验革新
前端
DDXYcoder14 分钟前
万字解析动态内存从编译到运行
java·前端·算法
光影少年15 分钟前
react navite封装一个RN 通用按钮组件
前端·javascript·react native·react.js·前端框架
晴天1616 分钟前
CSS 预处理器深度解析-Day35
前端·css
恋猫de小郭19 分钟前
AI 时代,也许你的 Flutter 需要一套 Dartastic OpenTelemetry 监控
android·前端·flutter
独立开发之道19 分钟前
【three.js教程】Three.js 矩阵变换:position/quaternion/scale 和 matrix 到底怎么配合
开发语言·javascript·矩阵
wujiuhsu21 分钟前
前端实现二维码生成器:Canvas、SVG、纠错等级、扫码校验与批量
前端
计算机魔术师26 分钟前
从卖铲人到圈地:英伟达129亿拿下Hugging Face
前端
攻城狮-申30 分钟前
git本地分支对齐远程分支
前端·git