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}`); // 如果找不到元素,输出警告信息  
  }  
});
相关推荐
侠客行03172 小时前
Mybatis连接池实现及池化模式
java·mybatis·源码阅读
蛇皮划水怪2 小时前
深入浅出LangChain4J
java·langchain·llm
灰子学技术4 小时前
go response.Body.close()导致连接异常处理
开发语言·后端·golang
老毛肚4 小时前
MyBatis体系结构与工作原理 上篇
java·mybatis
风流倜傥唐伯虎4 小时前
Spring Boot Jar包生产级启停脚本
java·运维·spring boot
二十雨辰4 小时前
[python]-AI大模型
开发语言·人工智能·python
Yvonne爱编码5 小时前
JAVA数据结构 DAY6-栈和队列
java·开发语言·数据结构·python
Re.不晚5 小时前
JAVA进阶之路——无奖问答挑战1
java·开发语言
Daniel李华5 小时前
echarts使用案例
android·javascript·echarts
北原_春希5 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts