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

相关推荐
刘发财1 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
牛奶4 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程
牛奶4 小时前
前端人为什么要学AI?
前端·人工智能·ai编程
Kagol6 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路7 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide8 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter8 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸9 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live000009 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉9 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化