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

相关推荐
LYFlied9 分钟前
在AI时代,前端开发者如何构建全栈开发视野与核心竞争力
前端·人工智能·后端·ai·全栈
用户479492835691518 分钟前
我只是给Typescript提个 typo PR,为什么还要签协议?
前端·后端·开源
馬致远19 分钟前
Vue -组件入门
javascript·vue.js·ecmascript
程序员爱钓鱼40 分钟前
Next.js SSR 项目生产部署全攻略
前端·next.js·trae
程序员爱钓鱼41 分钟前
使用Git 实现Hugo热更新部署方案(零停机、自动上线)
前端·next.js·trae
御形封灵1 小时前
基于原生table实现单元格合并、增删
开发语言·javascript·ecmascript
颜颜yan_1 小时前
DevUI + Vue 3 入门实战教程:从零构建AI对话应用
前端·vue.js·人工智能
Irene19911 小时前
Prettier 配置文件 .prettierrc.js 和 .prettierrc.json 的区别
javascript·json
国服第二切图仔2 小时前
DevUI Design中后台产品开源前端解决方案之Carousel 走马灯组件使用指南
前端·开源
无限大62 小时前
为什么浏览器能看懂网页代码?——从HTML到渲染引擎的奇幻之旅
前端