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

相关推荐
xnkyn1 分钟前
frp内网穿透https访问本地服务,frpee客户端https教程
前端·后端·网络协议·http·https
布局呆星1 小时前
Vue3 计算属性|从基础缓存到可读写
前端·javascript·vue.js
ZPC82108 小时前
如何创建一个单例类 (Singleton)
开发语言·前端·人工智能
紫_龙9 小时前
最新版vue3+TypeScript开发入门到实战教程之重要详解readonly/shallowReadOnly
前端·javascript·typescript
roamingcode10 小时前
前端 AI Agent 多智能体协作架构:从对抗式排查到工作流解耦
前端·人工智能·架构·agent·team
蓝莓味的口香糖11 小时前
【vue】初始化 Vue 项目
前端·javascript·vue.js
aikongmeng11 小时前
【Ai】Claude Code 初始化引导
javascript
光影少年12 小时前
数组去重方法
开发语言·前端·javascript
我命由我1234512 小时前
浏览器的 JS 模块化支持观察记录
开发语言·前端·javascript·css·html·ecmascript·html5
weixin_4434785112 小时前
Flutter第三方常用组件包之路由管理
前端·javascript·flutter