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

相关推荐
kyriewen14 分钟前
我用了三周Claude Code Skills——总结出5条铁律,第3条最反直觉
前端·ai编程·claude
阳光是sunny17 分钟前
LangGraph实战教程:控制流详解
前端·人工智能·后端
格尔曼Noah1 小时前
Safari浏览器中如何只允许指定网站下载
前端·safari
用户059540174462 小时前
用了3年Redis,才发现我一直没搞懂缓存一致性测试
前端·css
swipe2 小时前
07|(前端转后全栈)为什么后端也要缓存?从前端缓存思维理解 Redis
前端·后端·全栈
IT小盘2 小时前
05-企业项目统一接入多个大模型-适配器模式实战
前端·人工智能·适配器模式
swipe2 小时前
06|(前端转后全栈)登录后端到底在做什么?JWT、Spring Security 和权限链路
前端·后端·全栈
海上彼尚3 小时前
Nodejs也能写Agent - 22.LangGraph篇 - 上下文工程
前端·javascript·人工智能·langchain·node.js
阳光是sunny3 小时前
LangGraph实战教程:预定义状态MessagesState与AgentState
前端·人工智能·后端