Show Sub Menu on click and not hover

Question

I have a menu in which I am trying to get the sub menu to appear on click as opposed to hover. I have the hover styles set and working so when I hover the sub-nav appears as a block element. Not having any luck removing the hover and trying to add click event. If the parent link is clicked the page just refreshes.

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

subMenuLink.addEventListener("click", toggleMenu);

function toggleMenu() {
  if (subMenu.classList.contains("visible")) {
    subMenu.classList.remove("visible");
  } else {
    subMenu.classList.add("visible");
  }
}

I feel like this is on track…but not so yet! Any suggestions please, thank you

0
user55555 2 months 2021-09-27T15:11:14-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse