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}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
爱读源码的大都督3 小时前
为什么有了HTTP,还需要gPRC?
java·后端·架构
qq_4924484463 小时前
Jmeter设置负载阶梯式压测场景(详解教程)
开发语言·python·jmeter
im_AMBER3 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
Lucky_Turtle3 小时前
【Java Xml】Apache Commons Digester3解析
xml·java·apache
聪明的笨猪猪4 小时前
Java Redis “缓存设计”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
FIavor.4 小时前
我发送给Apifox是http://localhost:9002/goods/getByUserName?name=张三 为什么会是500哪里错了?
java·服务器·网络协议·http
ID_180079054734 小时前
京东获取整站实时商品详情数据|商品标题|数据分析提取教程
java·开发语言
玩代码4 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
微露清风4 小时前
系统性学习C++-第五讲-内存管理
java·c++·学习
计算机毕业设计木哥4 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的快递物流仓库管理系统【源码+文档+调试】
java·vue.js·spring boot·后端·课程设计