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

相关推荐
mm-q29152227296 小时前
云原生开发实战:从入门到精通 Vue3、Vite、Pinia、Axios 与 HTML、JavaScript、CSS 项目开发
javascript·云原生·html
MegatronKing6 小时前
一个有意思的问题引起了我的反思
前端·后端·测试
JohnYan6 小时前
Bun技术评估 - 30 SSE支持
javascript·后端·bun
鹤归时起雾.6 小时前
CSS属性继承与元素隐藏全解析
前端·css
yzx9910136 小时前
一个嵌入式存储芯片质量评估系统的网页界面设计
开发语言·javascript·ecmascript
火星数据-Tina6 小时前
让电竞数据实时跳动:Spring Boot 后端 + Vue 前端的完美融合实践
前端·vue.js·spring boot
fruge7 小时前
前端可视化家庭账单:用 ECharts 实现支出统计与趋势分析
前端·javascript·echarts
IT_陈寒7 小时前
Vue3性能优化实战:5个被低估的Composition API技巧让你的应用快30%
前端·人工智能·后端
嘻嘻哈哈猿人7 小时前
从 0 到 1 实现一个支持 @ 提及用户的输入框组件(Vue3 实战)
前端·vue.js
东土也7 小时前
Vue 项目 Nginx 部署路径差异分析与部署指南
前端