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}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
JienDa1 分钟前
PHP 静态分析工具实战:PHPStan 和 Psalm 完全指南
开发语言·php
jiayong232 分钟前
AI应用领域编程语言选择指南:Java vs Python vs Go
java·人工智能·python
XXYBMOOO2 分钟前
Qt 调用 DLL 实现固件升级进度弹窗(完整实战案例)
开发语言·qt·性能优化·简单工厂模式
胖咕噜的稞达鸭4 分钟前
【C语言进阶】死磕指针:从内存原理到指针数组的深度解析
c语言·开发语言·网络
lly2024065 分钟前
Pandas 相关性分析
开发语言
bjzhang756 分钟前
IDEA 2025.3重磅发布,Ultimate 终极版和 Community社区版二合一,免费版可商用
java·idea
CHINAHEAO7 分钟前
Bagisto修复php弃用警告,看着难受
开发语言·php
程序猿零零漆8 分钟前
Spring之旅 - 记录学习 Spring 框架的过程和经验(三)Bean的依赖注入配置、Spring的其它配置标签
java·学习·spring
博大世界8 分钟前
Python打包成exe文件方法
开发语言·python
yongui4783410 分钟前
双线性四边形等参单元程序(MATLAB实现)
开发语言·matlab