Modify second click action in jQuery

Question

I have a jQuery function in a WordPress portal that handles the behavior of the menu and the display of subcategories to display them correctly on mobile. The code, developed by the theme editor, is this:

$('.mobile-menu .menu-item-has-children').children('a').on('click', function(event){
       event.preventDefault();
       $(this).toggleClass('submenu-open').next('.sub-menu').slideToggle(300).end().parent('.mobile-menu .menu-item-has-children').siblings('.mobile-menu .menu-item-has-children').children('a').removeClass('submenu-open').next('.sub-menu').slideUp(300);
     });

The problem is that this function overrides the link of the parent category of the menu. Let me explain:

When I click on Popular, the submenu displays correctly. But if I click on it again, the category collapses. The correct thing would be that in the second click on Popular, it would take me to the URL of Popular.

Is it possible to control this second click?

Answer 1

Yes you can control the second click,

because when you click first, you had a class submenu-open , if you have children

and if your item selected has a link, the class inner-link exists.

you could test if you have a class in your click function like this for example::

if($(this).hasClass("submenu-open"){
  if($(this).hasClass("inner-link"){
    //do something
  }else{
    // do something if needed
  }
  //do something if needed
}else{
  //do something if needed      
}

for example you could test if you have a defined link, if yes you avoid the preventdefault

you could know if you have a link by testing the class inner-link