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

相关推荐
zhensherlock13 小时前
Protocol Launcher 系列:Working Copy 提交与同步全攻略
javascript·git·typescript·node.js·自动化·github·js
天若有情67313 小时前
【开源推荐】form-validator-cn 轻量级中文表单校验库 | TS 零依赖、极简开箱即用
前端·npm·开源·node·js·表单校验
shjita13 小时前
maven涉及的配置
java·前端·maven
changshuaihua00113 小时前
useState 状态管理
开发语言·前端·javascript·react.js
鹏程十八少13 小时前
6. 2026金三银四 面试官最爱的 Binder:一次拷贝、Activity 启动流程,这篇全搞定
前端·面试·前端框架
知识分享小能手13 小时前
ECharts入门学习教程,从入门到精通,综合实战——ECharts数据大屏 - 完整知识点(9)
前端·学习·echarts
是吗乔治14 小时前
vuetify实现excel表格粘贴效果
前端·vue.js·vue·excel
Java后端的Ai之路14 小时前
React 快速入门到精通教程:从零基础到能写项目
前端·react.js·前端框架
是上好佳佳佳呀14 小时前
【前端(九)】CSS Transform 2D/3D 变换笔记:分清两个原点,搞懂多重变换
前端·css·笔记
|晴 天|1 天前
Vue 3 + TypeScript + Element Plus 博客系统开发总结与思考
前端·vue.js·typescript