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

相关推荐
Juchecar4 分钟前
Node.js 项目 TypeScript + express 实现 Web 服务端返回文件内容
javascript
ITMan彪叔4 分钟前
uniapp 微信小程序 调试
前端
李剑一7 分钟前
面试官:watch和computed的区别?不要简单的说监听器和计算属性!
前端·面试
小喷友16 分钟前
Next.js 中的 Edge Middleware 实战
前端·react.js·next.js
跟橙姐学代码18 分钟前
程序员都爱的小秘密:init.py 到底凭啥这么重要?
前端·python
用户527096487449018 分钟前
分支管理和提交信息规范
前端
xianxin_18 分钟前
CSS Lists(列表)
前端
晴空雨19 分钟前
🚀 告别重复代码!基于 Axios 的 DSL API 声明库,让接口调用更优雅
前端
_一两风20 分钟前
《告别回调地狱!三种写法带你玩转 JavaScript 异步》
javascript·ecmascript 6
ygming20 分钟前
Q55- code34- 在排序数组中查找元素的第一个和最后一个位置 + Q56- code33- 搜索旋转排序数组
前端·算法