How to make jQuery constantly watch for event instead of onClick

Question

(TL;DR)

Can jQuery/Javascript be made to watch an element for a specific class; and if that class is present, perform a function. If the class is not present, perform a different function.

(Full)

We have a WordPress theme that uses a Mega Menu. The menu is configured to appear under the header rather than below it. As such, certain elements are hard to see so we created an OnClick event that would, when a main navigation link is clicked, change the color of various header elements:

jQuery(document).ready(function() {
    jQuery('#main-menu nav ul').click(function(){
         jQuery('.contact-button a').toggleClass('make-green');
         jQuery('.main-header').toggleClass('make-blue');
    });
});

This code makes a header button green and the header BG blue, but only if a main navigation link (#main-menu nav ul) is clicked. This works fine, but its a toggle, and only works on main navigation links. If a user clicks outside the mega menu, or clicks the close button in the mega menu itself, the toggle will not take place and will not reset the colors by removing the class.

What I need is for jQuery to watch in real time if the menu is open or not and apply (or remove) the addClass(es) accordingly. Luckily, when the menu is open, certain menu elements have classes we can target.

<nav class="">Menu is NOT displayed</nav>

<nav class="menu-open">Menu IS displayed</nav>

The logic we need:

• Constantly watch the nav element for the existence of the class "menu-open".
• If the class is present, perform the two addClass in my example above.
• If the class is not present, remove the two addClass in my example above.
• Does not rely on main navigation link clicks

This way if the menu is closed via clicking outside the menu area, the close button, or other means, the classes will be removed and doesn't require a toggle of the main navigation link.

Hoping this is possible via whichever means.

Answer 1

You can add the click event handler to the document itself. And check if the user clicks a link in main-menu, toggle the classes. If not, remove the class (no real need to check if the class exists).

I added toggle to only the menu so that way the class doesn't change if you click anywhere else on the document.

$(document).ready(function() {

    $(document).on("click",function(e){
      if($(e.target).parents("#main-menu").length > 0){
         $('.contact-button a').toggleClass('make-green');
         $('.main-header').toggleClass('make-blue');
      }
      else{
         $('.contact-button a').removeClass('make-green');
         $('.main-header').removeClass('make-blue');
      }
    });
});

.contact-button .make-green{
color:green
}

.main-header.make-blue{
color:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu">
 <nav>
   <ul>
    <li><a href="#">Menu</a></li>
   </ul>
 </nav>
</div>
<div class="contact-button"><a href="">Contact</a></div>
<div class="main-header">MAIN HEADER</div>