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

相关推荐
dorisrv8 小时前
React 状态管理:Zustand 快速上手指南
前端·react.js
lkbhua莱克瓦248 小时前
IO流——打印流
java·开发语言·前端·学习方法
im_AMBER8 小时前
Canvas架构手记 08 CSS Transform | CSS 显示模型 | React.memo
前端·css·笔记·学习·架构
申阳8 小时前
Day 23:登录设计的本质:从XSS/CSRF到Session回归的技术演进
前端·后端·程序员
岛风风8 小时前
前端HTML导出PDF分页难题:10天踩坑后的终极方案,精细到每个像素点!!!
前端·javascript
LYFlied8 小时前
单页应用与多页应用:架构选择与前端演进
前端·架构·spa·mpa·ssr
前端老宋Running9 小时前
你的组件 API 为什么像个垃圾场?—— React 复合组件模式 (Compound Components) 实战教学
前端·react.js·架构
alanAltman9 小时前
前端架构范式:意图系统构建web
前端·javascript
梦鱼9 小时前
我踩了 72 小时的 Electron webview PDF 灰色坑,只为告诉你:别写这行代码!
前端·javascript·electron
ycgg9 小时前
Webpack vs Vite 全方位对比:原理、配置、场景一次讲透
前端