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

相关推荐
weixin_5394467814 小时前
使用Java HttpServletResponse和JavaScript Fetch下载文件
java·javascript·python
每天吃饭的羊14 小时前
LeetCode JS 常用辅助数据结构
前端
丑过三八线14 小时前
【无标题】
前端
yuananyun14 小时前
APP 图标规范与设计全攻略:iOS/Android/Web 一次设计多端合规,快速出图
android·前端·ios
李剑一14 小时前
面试问网络?问到我的软肋了。面试官:讲一下HTTP强缓存与协商缓存
前端·面试
小雨下雨的雨14 小时前
近视度数模拟器鸿蒙PC Electron框架技术实现详解
前端·javascript·electron
TE-茶叶蛋15 小时前
Next.js中App Router 全部特殊文件一览
开发语言·javascript·网络
喜欢踢足球的老罗15 小时前
逆向 WhatsApp Web:前端 SDK 深度剖析与 Chrome 插件实战指南
前端·chrome
roseonly_h15 小时前
如何将钉钉微应用在浏览器打开
前端·钉钉
小雨下雨的雨15 小时前
鸿蒙PC用Electron框架——Canvas蜡笔抖动效果实现技术深度解析
前端·javascript·华为·electron·鸿蒙系统