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

相关推荐
Keely4028518 分钟前
Claude 配置使用墨刀MCP(modao-proto-mcp)
前端·aigc·claude
少卿24 分钟前
从零构建 React Native 导航体系-React Navigation
前端·react native
Wect24 分钟前
学习React-DnD:实现 TodoList 简单拖拽功能
前端·react.js
前端小书生25 分钟前
Google Map、Solar Api
前端·react.js·google
毕设十刻36 分钟前
基于Vue的售票系统开发3g480(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
行走的陀螺仪1 小时前
前端CI/CD 流程
前端·ci/cd·工程化·自动化构建
裕波1 小时前
前端,不止于 AI。12 月 20 日,FEDAY 2025,长沙见!
前端
excel1 小时前
使用 Canvas 实现扫描效果:宽度计算、透明度控制与旋转
前端
MC丶科1 小时前
Spring Boot + Vue 实现一个在线商城(商品展示、购物车、订单)!从零到一完整项目
前端·vue.js·spring boot
q***49862 小时前
分布式WEB应用中会话管理的变迁之路
前端·分布式