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 分钟前
AI剪辑工具降低创作门槛
前端
paopaokaka_luck13 分钟前
社区服务平台(加权协同过滤推荐、Jieba中文词频分析、WebSocket实时聊天、求助处理闭环、 活动积分闭环、ECharts多维分析)
java·前端·spring boot·mysql·echarts·mybatis
墨林陌24 分钟前
翻完 DeepSeek 的 GitHub 仓库,我发现 V5 的发布路已经修好了
前端
Antruly40 分钟前
uvscope:Web 调试界的瑞士军刀
前端
计算机魔术师1 小时前
Anthropic S-1 披露:半年前发布的模型,已贡献不了多少收入了
前端
qq_340040881 小时前
idea2021版,vue项目的package.json不展示scripts的绿色箭头
javascript·vue.js·json
qq_364682151 小时前
录音APP怎么切换语言?多语言版本如何使用
java·服务器·前端
2601_968900771 小时前
玻璃深加工的工艺窗口:4 道工序的温度与时间参数边界
android·java·javascript
志尊宝1 小时前
AI原生前端开发(037):AI辅助的Vue 3开发最佳实践
前端·vue.js·ai-native
中科三方1 小时前
AI时代新攻击面:悬空DNS记录正在成为黑客的低成本入侵入口
服务器·前端·人工智能