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

相关推荐
EndingCoder15 小时前
性能优化:类型系统的最佳实践
linux·前端·javascript·ubuntu·性能优化·typescript
毕设源码-朱学姐15 小时前
【开题答辩全过程】以 基于web的生鲜农产品信息管理系统为例,包含答辩的问题和答案
前端
Hello.Reader15 小时前
Flink 2.0 从 flink-conf.yaml 到 config.yaml 的正确打开方式(含迁移与最佳实践)
java·前端·flink
晚霞的不甘15 小时前
Flutter for OpenHarmony:注入灵魂:购物车的数据驱动与状态管理实战
android·前端·javascript·flutter·前端框架
skywalk816315 小时前
cbsd的clonos/control-pane web管理页面一直闪烁和网页打开显示500error 的问题解决(500error问题未解决)
服务器·前端·freebsd·cbsd
weixin_4365250715 小时前
若依多租户版 - modules中创建子模块
java·服务器·前端
好奇的菜鸟15 小时前
使用 Vite 快速创建 React + TypeScript 项目全记录
前端·react.js·typescript
*小雪15 小时前
nvm的安装与管理和npm audit的报错解决
前端·npm·node.js
Marshmallowc15 小时前
React useState 数据不同步?深度解析无限滚动中的“闭包陷阱”与异步更新丢失问题
前端·javascript·react.js·闭包·fiber架构
某柚啊15 小时前
解决 minimatch 类型报错问题
前端·webpack·npm