1回答

• 

  KingOflongkouWest

  2021-05-11 09:49:04

  // 定义类
  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)
              })
          });
  
  
  
  
      }
  
  
  }

  
  

  0 0