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}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
哦虎!2 小时前
【JavaEE】网络初识
java
半个落月3 小时前
LangChain Agent 中间件实战(上):生命周期、状态、短路与工具包
javascript·langchain
for_ever_love__3 小时前
MySQL ORDER BY 排序优化:从 Using filesort 到索引有序扫描(含双路 / 单路排序原理)
java·mysql·优化·存储·by·order·filesort
半个落月3 小时前
LangChain Agent 中间件实战(下):DeepAgents文件权限、长期记忆与对话摘要
javascript·langchain
程序猿追4 小时前
kotlin-retry 接入鸿蒙后,怎样确认它真的会停止重试
开发语言·kotlin·harmonyos
我是人✓4 小时前
Java文件上传三方式对比:从传统到SpringBoot
java·开发语言
智能直播4 小时前
网络RTMP拉流不卡顿、声音不同步,一文讲透缓冲区、时间戳
开发语言·ffmpeg·php·音视频·视频编解码
欣栀♡4 小时前
JVM 频繁 Full GC 先看日志括号里的 cause,jstat 的 FGC 在 JDK 8 上会骗人
java·jvm
IT研究室4 小时前
最新计算机毕业设计选题推荐-基于spring boot的葡萄酒文化宣传网站-网站-文档指导-Java-springboot
java·spring boot·课程设计
慧都小项4 小时前
MyEclipse 中创建和测试 JAX-RS REST 接口:从项目配置到 REST Explorer
java·restful·myeclipse·jax-rs