Toggle class to open close Wordpress menu - cant click on child links-CodePudding

I've got a wordpress menu where I'm using a click to open the menu function (rather than hover). Got this working fine. So if one dropdown is open and I click another dropdown the first open dropdown closes. All this works great. But I can't click on any child links within each dropdown. I'm guessing because they are child elements of the main <li> I'm using for the click to add/remove class function.

Any idea how I can keep the current function I have but allow clicking of child links within each dropdown?

Here's what I'm using:

jQuery(document).ready(function ($) {

  $('.menu-item-has-children').click(function (e) {
    if ($(this).hasClass('open')) {
      $('.menu-item-has-children').removeClass('open');
      e.preventDefault();
    } else {
      $('.menu-item-has-children').removeClass('open');
      $(this).addClass('open');
      e.preventDefault();
    }
  });

});

<link href="https://tfrg.devweb.site/wp-content/themes/tfrgroup/assets/css/app.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div >
                
<nav >
<ul id="menu-main-navigation-1" >
  <li ><a href="#">About us</a>
    <ul >
        <li ><a href="https://www.google.com">Our Story</a></li>
        <li ><a href="https://www.amazon.com">Circular Economy</a></li>
    </ul>
  </li>
<li ><a href="#">Services</a>
  <ul >
      <li ><a href="https://www.google.com">Logistics</a></li>
      <li ><a href="https://www.google.com">Recycling</a></li>
      <li ><a href="https://www.google.com">Rejuvenation</a></li>
      <li ><a href="https://www.google.com">Resale</a></li>
  </ul>
</li>
<li ><a href="#">Case Studies</a></li>
<li ><a href="#">News</a></li>
</ul>
</nav>

</div>
</header>

Thanks

CodePudding user response：

The thing is submenu is inside element that has "click" event listener. So basically clicking on submenu you're triggering it's parent event handler.

I did some tiny modifications to you code... hopefully this will help

jQuery(document).ready(function($) {
  $('.menu-trigger').click(function(e) {
    e.preventDefault();
    if ($(this).parent().hasClass('open')) {
      $('.menu-item-has-children').removeClass('open');
    } else {
      $('.menu-item-has-children').removeClass('open');
      $(this).parent().addClass('open');
    }
  });
});

<link href="https://tfrg.devweb.site/wp-content/themes/tfrgroup/assets/css/app.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div >

    <nav >
      <ul id="menu-main-navigation-1" >
        <li ><a  href="#">About us</a>
          <ul >
            <li ><a href="https://www.google.com">Our Story</a></li>
            <li ><a href="https://www.amazon.com">Circular Economy</a></li>
          </ul>
        </li>
        <li ><a  href="#">Services</a>
          <ul >
            <li ><a href="https://www.google.com">Logistics</a></li>
            <li ><a href="https://www.google.com">Recycling</a></li>
            <li ><a href="https://www.google.com">Rejuvenation</a></li>
            <li ><a href="https://www.google.com">Resale</a></li>
          </ul>
        </li>
        <li ><a href="https://www.google.com">Case Studies</a></li>
        <li ><a href="https://www.google.com">News</a></li>
      </ul>
    </nav>

  </div>
</header>