js鼠标经过就增加一个open 进行展开 遍历数组,为每个id对应的元素添加事件监听器

js鼠标经过就增加一个open 进行展开 遍历数组,为每个id对应的元素添加事件监听器

javascript 复制代码
{% javascript %}

const ids = ['Details-HeaderMenu-aaaaaa2','Details-HeaderMenu-aaaaaa6', 'Details-HeaderMenu-aaaaaa4','Details-HeaderSubMenu-1','Details-HeaderSubMenu-2','Details-HeaderSubMenu-3','Details-HeaderSubMenu-4','Details-HeaderSubMenu-5','Details-HeaderSubMenu-6','Details-HeaderSubMenu-7','Details-HeaderSubMenu-8'];  

// 遍历数组,为每个id对应的元素添加事件监听器  
ids.forEach(id => {  
  let detail = document.getElementById(id); // 使用变量id获取元素  
  
  if (detail) { // 检查元素是否存在  
    detail.addEventListener('mouseover', () => { // 绑定mouseover事件  
      if (!detail.hasAttribute('open')) {  
        detail.setAttribute('open', '');  
        // 根据需要设置aria-expanded属性  
        // detail.setAttribute('aria-expanded', 'true');  
      }  
    });  
  
    detail.addEventListener('mouseleave', () => { // 绑定mouseleave事件  
      if (detail.hasAttribute('open')) {  
        detail.removeAttribute('open');  
        detail.setAttribute('aria-expanded', 'false');  
      }  
    });  
  } else {  
    console.warn(`No element found with id: ${id}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
qq. 28040339846 分钟前
js 原型链分析
开发语言·javascript·ecmascript
大飞哥~BigFei7 分钟前
RabbitMq消费延迟衰减重试实现思路
java·分布式·rabbitmq
Elnaij11 分钟前
从C++开始的编程生活(13)——list和浅谈stack、queue
开发语言·c++
有趣的野鸭13 分钟前
JAVA课程十一次实验课程主要知识点示例
java·前端·数据库
格鸰爱童话13 分钟前
next.js(二)——从react到next.js
前端·javascript·react.js
q***07142 小时前
Spring Boot 多数据源解决方案:dynamic-datasource-spring-boot-starter 的奥秘(上)
java·spring boot·后端
q***49862 小时前
Spring Boot 3.4 正式发布,结构化日志!
java·spring boot·后端
Hammer Ray4 小时前
SourceMap知识点
javascript·sourcemap
一晌小贪欢5 小时前
【Python数据分析】数据分析与可视化
开发语言·python·数据分析·数据可视化·数据清洗
沐浴露z5 小时前
【微服务】基本概念介绍
java·微服务