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

相关推荐
小贤哥11 分钟前
死磕这几道js手写题
前端·程序员
Lee川13 分钟前
🌐 深入 Chrome 浏览器:从单线程到多进程架构的进化之路
前端·架构·前端框架
学以智用15 分钟前
Vue 3 项目核心配置文件详解
前端·vue.js
工边页字18 分钟前
AI 开发必懂:Context Window(上下文窗口)到底是什么?
前端·人工智能·后端
Mr_Swilder20 分钟前
intel显卡本地部署大模型
前端
yuki_uix20 分钟前
Promise 与 async/await:从回调地狱到优雅异步的演进之路
前端·javascript
over69723 分钟前
📸《拍照记单词》—— 从零到上线的完整开发指南(超详细版)
前端·人工智能·产品
毛骗导演24 分钟前
万字解析 OpenClaw 源码架构-架构概览
前端·架构
天才熊猫君32 分钟前
Flex布局深度解析:为什么我的Flex项目不按预期收缩?
前端
风雪心33 分钟前
Antd组件库Form的onValuesChange和getFieldsValue的调用时机分析
前端