//?定義類
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)
????????????})
????????});




????}


}