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}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
vx-程序开发1 小时前
springboot旅游推介平台---附源码24175
java·spring boot·python·spring cloud·eclipse·django·idea
格林威1 小时前
多相机并行采图最佳实践:Task.WhenAll + 异常处理 + 资源释放
开发语言·人工智能·数码相机·计算机视觉·c#·视觉检测·机器视觉
djjjx.1 小时前
【 C++ 】多态
开发语言·c++·多态
逝水无殇1 小时前
HTML 文本格式化详解:掌握 <strong>、<em>、<mark>、<del> 等常用标签
前端·javascript·html
夜雪一千1 小时前
Python如何使用XPath定位没有特征的元素?无id、无class通用定位技巧
开发语言·python
艾莉丝努力练剑1 小时前
【QT:解决问题】Qt5Core.dll:无法定位程序输入点
java·开发语言·qt·学习·面试
流浪0012 小时前
Python 基础语法(一):常量、变量、输入输出与运算符
开发语言·python
小蒜学长2 小时前
“喵汪联盟”宠物领养系统的设计与实现(代码+数据库+LW)
java·spring boot·后端·宠物
程序员黑豆2 小时前
Java字符串常量池完全指南:原理、intern()方法与性能优化最佳实践
java·前端·ai编程
光影少年2 小时前
react离线缓存、图片缓存方案
开发语言·前端·javascript·react native·react.js·缓存·前端框架