Wordpress responsive dropdown menu - On first click ignore link and open dropdown menu, second click go to url

Question

I am working on a responsive menu for a wordpress site.

On a mobile screen I need the submenu parent link to be ignored on first click whilst inturn showing the submenu and then if clicked for a second time it will navigate to its URL.

When my javascript works correctly it will check to see if the submenu is visibile by checking its display class. If display is set to 'none' it will make the parent element ignore its link and make the submenu visible by changing display to 'block'.

I have seen a couple of related question/answers but all have used JQuery where as I am trying to accomplish the solution with vanilla java script.

Here is an example of my html structure:

<nav class="nav nav--primary">
<ul id="menu-primary-navigation" class="nav--primary--links">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-49">
      <a href="https://www.google.com">Test 1
        <ul class="sub-menu">      
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
            <a href="">FAQ'S</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51">
            <a href="">Your Stories</a>
          </li>
        </ul>
      </a>                
  </li> 
 <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-49">
      <a href="https://www.google.com">Test 2
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">
            <a href="">Sub Link 1</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54">
            <a href="">Sub Link 2</a>
          </li>
        </ul>
      </a>                
  </li>

Here is my CSS:

.logo{
margin: 0.625em;
}

.menu-item-has-children {
> a {
  &::after {
    background-repeat: no-repeat;
    background-size: 23px;
    height:13px;
    width:25px;
    margin-left: 30px;
    content: "";
    display: inline-block;

  }
 }
}

.nav--primary ul 
{
    list-style: none outside none;
}

.nav--primary li a 
{
    line-height: 25px;
}

.nav--primary > ul > li > a 
{
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}

.nav--primary li.parent > a 
{
    padding: 0 0 0 28px;
}

.nav--primary li.parent > a:before 
{
    content: ""; 
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}

.nav--primary ul li.active > a:before 
{
    background-position: 0 center;
}

.sub-menu
{
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}

.nav--primary ul li ul li 
{
    position: relative;
}

.nav--primary ul li ul li:before 
{
    content: "";
    left: -20px;
    position: absolute;
}

And this is my javascript:

const subLink = document.getElementsByClassName("menu-item-has-children");
const subMenu = docuument.getElementsByClassName("sub-menu")

for (var i = 0; i < subLink.length; i++) {
  subLink[i].addEventListener("click", function(event){
  if (subMenu.style.display === 'none'){
    return false;
    subMenu.style.display = "block";
  }
});
}

I have also included a codepen link: https://codepen.io/matthewoproctor/pen/PoYzPxa

Could anyone tell me where I am going wrong?

Answer 1

You should check, if element has a class-marker, for example "dropdown-opened". If it's absent, you should add it and then show your dropdown menu, if it's presented, you should change window.location on your item's link. I think you shouldn't use

<a href="some_link_here"></a>

as menu item if you want use it as dropdown menu item. Let it be

<p class="dropdown" link="some_link_here"></p>

var dropdowns = document.getElementsByClassName("dropdown");
for(var i = 0; i < dropdowns.length; i++)
{
    dropdowns[i].addEventListener("click", dropdownClick())
}

dropdownClick(event)
{
   if (!event) {
           event = window.event; // Older versions of IE use 
                                 // a global reference 
                                 // and not an argument.
    }
    var el = (event.target || event.srcElement); // DOM uses 'target';
                                                 // older versions of 
                                                 // IE use 'srcElement'
    if(!el.classList.contains("dropdown-opened"))
       el.classList.Add("dropdown-opened");
       some_script_to_open_dropdown_menu();
    else
    {
       window.location = el.attributes["link"];
    }
}

I didn't check code above, so it can contain some syntax error, but it's pure js. One more thing you should add - hiding menu by clicking not on dropdown or dropdown menu, it's an another task, but it's not hard