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

相关推荐
莪_幻尘4 分钟前
从 0 到 1 搭建你的 AI Agent 平台:当 Agent 有了工厂,人人都能造同事
前端·ai编程
yuzhiboyouye26 分钟前
XML写接口适用场景举例
java·服务器·前端
IMPYLH27 分钟前
HTML 的 <slot> 元素
前端·网络·html
计算机魔术师37 分钟前
AI行业周末炸锅:有人要踩刹车,有人嫌你刹车片太厚
前端
yuzhiboyouye43 分钟前
零sql和xml写接口,的区别是什么,过程是什么,举例一下下,用mybatis-plus+ spring-boot
java·服务器·前端
怕浪猫1 小时前
构建你自己的 AI Agent 发行版:从 Profile 定制到生产部署全流程
前端·后端·面试
深圳市益普科技有限公司1 小时前
半导体CIM数据底座:四步把多厂数据拉通
前端
乐迪绘防伪油墨技术分享2 小时前
特种功能油墨选型指南:温变 / 遇水 / 荧光 / UV LED 技术对比与供应商参考
前端·html·uv
cll_8692418912 小时前
WordPress Single Post 文章页美化:响应式表格、图片优化与自动悬浮 Table of Contents(CSS + JS)
前端·css
爱勇宝2 小时前
用了一个月 WorkBuddy,聊聊我的真实感受
前端·后端·程序员