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

Question

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 class="container">
                
<nav class="navigation">
<ul id="menu-main-navigation-1" class="nav-menu clearfix">
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-670"><a href="#">About us</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-712"><a href="https://www.google.com">Our Story</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-668"><a href="https://www.amazon.com">Circular Economy</a></li>
    </ul>
  </li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-671"><a href="#">Services</a>
  <ul class="sub-menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-672"><a href="https://www.google.com">Logistics</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-673"><a href="https://www.google.com">Recycling</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-674"><a href="https://www.google.com">Rejuvenation</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-675"><a href="https://www.google.com">Resale</a></li>
  </ul>
</li>
<li class="menu-item menu-item-type-post_type_archive menu-item-object-case-study menu-item-700"><a href="#">Case Studies</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="#">News</a></li>
</ul>
</nav>

</div>
</header>

Thanks

Answer 1

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 class="container">

    <nav class="navigation">
      <ul id="menu-main-navigation-1" class="nav-menu clearfix">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-670"><a class="menu-trigger" href="#">About us</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-712"><a href="https://www.google.com">Our Story</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-668"><a href="https://www.amazon.com">Circular Economy</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-671"><a class="menu-trigger" href="#">Services</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-672"><a href="https://www.google.com">Logistics</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-673"><a href="https://www.google.com">Recycling</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-674"><a href="https://www.google.com">Rejuvenation</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-675"><a href="https://www.google.com">Resale</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-post_type_archive menu-item-object-case-study menu-item-700"><a href="https://www.google.com">Case Studies</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="https://www.google.com">News</a></li>
      </ul>
    </nav>

  </div>
</header>