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

相关推荐
小聪7084 分钟前
elpis-core 动态组件扩展设计
前端
Amos_Web15 分钟前
Rspack 源码解析(七):Module、Chunk 与加载树优化
前端·rust·源码阅读
OpenTiny社区16 分钟前
从开发到运行:OpenTiny NEXT 如何构建 Agent 时代的 Web 应用?
前端·github·ai编程
愿得一猪蹄22 分钟前
前端性能优化,Core Web Vitals 三个指标到底怎么改
前端
xy345332 分钟前
Axure 9.0 中继器创建与设置步骤
前端·ui·html·axure·原型·产品设计
FEF前端团队33 分钟前
01# Vibe Coding工作流设计思维:前端开发者的协作框架
前端·cursor·vibecoding
计算机魔术师40 分钟前
OpenAI 发布模型错位报告框架,披露未发布模型自行修改自身指令案例
前端
特创数字科技44 分钟前
公文Word一键批量排版工具|批量统一公文标准格式,办公自动化桌面小工具
前端·python
流水白开1 小时前
JavaScript的原型链、类与类的继承
前端·javascript
PedroQue991 小时前
修复 .uvue 页面路径残留问题
前端·vite