web蓝桥杯真题:折叠手风琴

代码及注释:

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. web折叠手风琴

    2024-03-23 20:34:02       21 阅读
  2. web:展开你的扇子

    2024-03-23 20:34:02       18 阅读
  3. web:卡片话标签页

    2024-03-23 20:34:02       19 阅读
  4. web:分阵营,比高低

    2024-03-23 20:34:02       18 阅读
  5. web:搜一搜呀

    2024-03-23 20:34:02       18 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-23 20:34:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-23 20:34:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-23 20:34:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-23 20:34:02       20 阅读

热门阅读

  1. 分布式并行策略概述

    2024-03-23 20:34:02       19 阅读
  2. 国庆节是星期几

    2024-03-23 20:34:02       18 阅读
  3. 为wordpress后台添加一个自定义页面

    2024-03-23 20:34:02       20 阅读
  4. Linux ld链接器

    2024-03-23 20:34:02       17 阅读
  5. server2016datacenter改正式版

    2024-03-23 20:34:02       18 阅读
  6. 苍穹外卖Day3碰到的元注解

    2024-03-23 20:34:02       16 阅读
  7. Eureka注册中心

    2024-03-23 20:34:02       19 阅读
  8. C语言经典面试题目(二十)

    2024-03-23 20:34:02       19 阅读