Wordpress javascript 导航——尝试在单击时将类添加到子项

如何解决Wordpress javascript 导航——尝试在单击时将类添加到子项

我有一个 [主要] 使用 wordpress 的导航菜单。 顶级菜单项按预期工作并打开子菜单。

但是，当我尝试添加代码以使子子菜单具有特定类时，因此显示子菜单时，它打破了上层导航，并且不会按预期将类应用于代码.

工作顶级代码，未添加子菜单代码

• https://jsfiddle.net/szLmqvkn/

不工作（使用子菜单代码）

• https://jsfiddle.net/jqkwnpv1/2/

任何帮助将不胜感激。

脚本代码

    window.onload = function(){
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
const items = document.querySelectorAll(".menu-item");
const submenu = document.querySelectorAll(".sub-menu");
const subitems = document.querySelectorAll(".menu-item");

/* Toggle mobile menu */
function toggleMenu() {
  if (menu.classList.contains("active")) {
    menu.classList.remove("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
  } else {
   menu.classList.add("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
  }
}
  

/* Activate Submenu */
function toggleItem() {
  if (this.classList.contains("sub-menu-active")) {
    this.classList.remove("sub-menu-active");
  } else if (menu.querySelector(".sub-menu-active")) {
    menu.querySelector(".sub-menu-active").classList.remove("sub-menu-active");
    this.classList.add("sub-menu-active");
  } else {
    this.classList.add("sub-menu-active");
  }
}
  
  

/* Close Submenu From Anywhere */
function closeSubmenu(e) {
  let isClickInside = menu.contains(e.target);

  if (!isClickInside && menu.querySelector(".sub-menu-active")) {
    menu.querySelector(".sub-menu-active").classList.remove("sub-menu-active");
  }
}
/* Event Listeners */
toggle.addEventListener("click",toggleMenu,false);
for (let item of items) {
  if (item.querySelector(".sub-menu")) {
    item.addEventListener("click",toggleItem,false);
  }
  item.addEventListener("keypress",false);
}
document.addEventListener("click",closeSubmenu,false);}





/*-----------------------------------*/


/*here is where i start having problems*/


/*-----------------------------------*/

 function toggleSubMenu() {
  if (submenu.classList.contains("active")) {
    submenu.classList.remove("active");
    } else {
   submenu.classList.add("active");

  }
} 



/* Activate Submenu */
function toggleChildItem() {
  if (this.classList.contains("child-menu-active")) {
    this.classList.remove("child-menu-active");
  } else if (menu.querySelector(".child-menu-active")) {
    menu.querySelector(".child-menu-active").classList.remove("child-menu-active");
    this.classList.add("child-menu-active");
  } else {
    this.classList.add("child-menu-active");
  }
}


/* Close Submenu From Anywhere */
function closeChildmenu(e) {
  let isClickInside = submenu.contains(e.target);

  if (!isClickInside && submenu.querySelector(".child-menu-active")) {
    submenu.querySelector(".child-menu-active").classList.remove("child-menu-active");
  }
}


/* Event Listeners */
toggle.addEventListener("click",toggleChildMenu,false);
for (let item of items) {
  if (item.querySelector(".child-menu-active")) {
    item.addEventListener("click",toggleChildItem,closeChildmenu,false);}