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

相关推荐
lewis_lk几秒前
ReactJs状态迷思:从"常量"到"闭包陷阱"的底层逻辑
前端·react.js
尘世中一位迷途小书童1 分钟前
在 Cesium 上画全球网格:我们怎么把 GeoSOT 接到瓦片调度上
前端·javascript·前端框架
aixingpan7 分钟前
aixingpan.cn API开发文档:api_docs_trichart_natal_progression_ter_transit2接口指南
前端·php
liuyt202217 分钟前
【javaweb】day3
前端
CoderYanger27 分钟前
Java EE 进阶:2.3 JavaScript
java·开发语言·前端·javascript·css·职场和发展·java-ee
恋猫de小郭28 分钟前
ADB Wi-Fi 2.0 ,Android 17 把无线调试的连接链路重新做了一遍
android·前端·flutter
薛一半29 分钟前
React路由初始
前端·react.js·前端框架
问心无愧051342 分钟前
ctf show web 178
前端·笔记
岁岁种桃花儿44 分钟前
Vue组件化编程第二篇:非单位件组件
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 146 期 - React 19.3、jQuery 1.0 20 周年、Bun 1.4.2...
前端·javascript·react.js