Present Sub Menu on click on and never hover

I’ve a menu through which I’m attempting to get the sub menu to seem on click on versus hover. I’ve the hover kinds set and dealing so after I hover the sub-nav seems as a block ingredient. Not having any luck eradicating the hover and attempting so as to add click on occasion. If the father or mother hyperlink is clicked the web page simply refreshes.

const subMenuLink = doc.querySelector(".main-nav .menu .menu-item-has-children");
const subMenu = doc.querySelector(".main-nav .menu .menu-item-has-children ul");

subMenuLink.addEventListener("click", toggleMenu);

perform toggleMenu() {
  if (subMenu.classList.comprises("visible")) {
    subMenu.classList.take away("visible");
  } else {
    subMenu.classList.add("visible");
  }
}

I really feel like that is on monitor…however not so but! Any strategies please, thanks