老师我在 item.addEventListener中的 li.children[1].classList.remove("active");一直报错说 Cannot read property 'classList' of undefined

来源:5-3 分类导航栏(下)

qq_慕盖茨0456175

2020-10-07 11:17

class Menu {

  constructor(id) {

    this.box = document.querySelector(id)


    this.ul = this.box.querySelector("ul");

    this.lis = this.box.querySelectorAll("li");//因为有多个li结点,所以加All

    this.subMenu = this.box.querySelectorAll(".sub-menu");

    this.time1 = null;

    this.time2 = null;


    this.init();//调用init

  }

  init() {

    console.log("menu");

   

    this.lis.forEach((item) => {

      

      item.addEventListener("mouse", (e) => {

        let li = e.target;

        console.log("mouse");


          this.time1=setTimeout(()=>

          {

            this.subMenu.forEach((item)=>

            {

              item.classList.remove("active");

            })//在这里用循环


             if(this.time1 !=null)

             {

               clearInterval(this.time1);

             }


            li.children[1].classList.add("active");//children[1]就是li下的第二个子类

          },200)

      })

    });

    //item.addEventListenneer代表鼠标触发事件,e有点像函数一样包含其中的事件


    this.lis.forEach((item) => {

      item.addEventListener("mouseleave", (e) => {

        let li = e.target;

        console.log("mouseleave");


        this.time2=setTimeout(() => {

          this.subMenu.forEach((item)=>

            {

              item.classList.remove("active");

            })//在这里用循环

          li.children[1].classList.remove("active");

        },200)

      })

    });

  }



}



写回答 关注

1回答

  • 慕的地0466377
    2021-02-14 22:54:06

    你发的代码错误百出,核对一下代码吧。

    报错是发生在倒数第二个remove那里的,第一个循环的事件是mouseenter不是mouse,而且你第二个循环那里怎么有两个循环?而且怎么是item.classList?

手把手从0打造电商网页开发

手把手教你实现电商网站开发之高仿京东商城网页

16969 学习 · 58 问题

查看课程

相似问题