// 根据教程视频，active 属性不是加给 subMenuEles 中的li，而是加个一级导航的li；
// 那为什么要做下面的操作？
this.timer1 = setTimeout(() => {
this.subMenuEles.forEach((item) => {
item.classList.remove("active")
})
})
// 定义类
class Menu {
// 构造函数
constructor (id) {
// 获取 id为 menu-box 的标签
this.box = document.querySelector(id);
// 获取 menu-box 第一个 ul 标签
this.ul = this.box.querySelector("ul");
// 获取 menu-box 所有 li 标签
this.lis = this.box.querySelectorAll("li");
// 获取 menu-box 所有 class 为 sub-menu 的标签
this.subMenuEles = this.box.querySelectorAll(".sub-menu");
this.timer1 = null;
this.timer2 = null;
this.init();
}
init () {
this.lis.forEach((item) => {
item.addEventListener("mouseenter",(e) => {
let li = e.target;
if (this.timer1 != null) {
clearTimeout(this.timer1);
}
this.timer1 = setTimeout(() => {
li.children[1].classList.add("active");
}, 200)
})
});
this.lis.forEach((item) => {
item.addEventListener("mouseleave", (e) => {
let li = e.target;
if (this.timer2 != null) {
clearTimeout(this.timer2);
}
this.timer2 = setTimeout(() => {
// 如果快速移动，li.childeren[1].classList.remove("active")
// 会因为上面的判断而没有执行，所以会出现鼠标移开但是二级列表还显示的问题
// 鼠标离开后，遍历二级列表，把二级列表的classList中的active去掉
this.subMenuEles.forEach((item) => {
item.classList.remove("active")
});
// li.children[1].classList.remove("active");
}, 200)
})
});
}
}