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");