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}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
txinyu的博客几秒前
Linux 内存管理
linux·运维·开发语言·c++
qq_2500568682 分钟前
SpringBoot 引入 smart-doc 接口文档插件
java·spring boot·后端
han_3 分钟前
为啥 Array.isArray 判断数组最靠谱?
前端·javascript
m0_748252384 分钟前
Ruby 数据类型概述
开发语言·mysql·ruby
珠穆峰7 分钟前
linux清理缓存命令“echo 3 > /proc/sys/vm/drop_caches”
java·linux·缓存
天天睡大觉7 分钟前
Python学习9
开发语言·python·学习
2301_797312268 分钟前
学习Java39天
开发语言·python·学习
掉头发的王富贵10 分钟前
【2025年终总结】对象有了,工作没了
java·后端·年终总结
zzxxlty11 分钟前
kafka C++ 和 java端计算分区ID不一致排查
java·c++·kafka
Reenrr11 分钟前
C++学习
开发语言·c++·学习