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}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
独立开阀者_FwtCoder10 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
Touper.14 分钟前
JavaSE -- 泛型详细介绍
java·开发语言·算法
sun00770017 分钟前
std::forward作用
开发语言·c++·算法
Hilaku18 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿18 分钟前
Js事件循环
javascript
datagear19 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
namehu27 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
多啦C梦a29 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
静若繁花_jingjing32 分钟前
Redis线程模型
java·数据库·redis
yvvvy43 分钟前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript