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

相关推荐
闻缺陷则喜何志丹30 分钟前
【前后缀分解 排序】B4274 [蓝桥杯青少年组省赛 2023] 数字游戏|普及+
c++·蓝桥杯·排序·洛谷·前后缀分解
换日线°1 小时前
前端炫酷展开效果
前端·javascript·vue
夏幻灵1 小时前
过来人的经验-前端学习路线
前端
CappuccinoRose2 小时前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router
FFF-X2 小时前
前端字符串模糊匹配实现:精准匹配 + Levenshtein 编辑距离兜底
前端
Hi_kenyon2 小时前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
止观止2 小时前
深入理解 interface vs type:终结之争
前端·typescript
css趣多多3 小时前
vue环境变量
前端
RFCEO3 小时前
前端编程 课程十五、:CSS核心基础3:文字+段落样式
前端·css·文字+段落样式·css文本样式·美化页面文本内容·演示动画说明·单行文字垂直居中技
摇滚侠3 小时前
【程序员入门系列】jQuery 零基础入门到精通!Jquery 选择器 API
前端·javascript·jquery