I have encountered similar questions regarding my menu open/close functionality, which is operated by slideToggle() instead of a class. I prefer not to modify my CSS to make it functional.
The requirement is for the menu to close when the user clicks anywhere else on the page.
HTML:
<div class="select">
<button class="select__selector">Reveal menu</button>
<ul class="select__select">
<li class="select__option"><a></a></li>
<li class="select__option"><a></a></li>
...
</ul>
</div>
JS:
var langTrigger = jQuery('.select__selector');
var langList = jQuery('.select__select');
// Trigger active state.
langTrigger.click(function() {
langTrigger.toggleClass('open');
langList.slideToggle(200);
});
// Close list when the page is loading.
langList.click(function() {
langTrigger.click();
});
I have experimented with various options, but this is the closest solution I have found.
if((langTrigger).hasClass('open')) {
jQuery('body').on('click', function() {
langList.css({display: 'none'});
});
}