Impede que o overlay feche quando o click está no mega menu - jquery, overlay, megamenu

O mega menu e a sobreposição são lançados quando você clica em # mega-dropdown. Quando você clica em espaços em branco dentro do mega menu, a sobreposição fica oculta. Eu gostaria de evitar isso.

Aqui está minha marcação simplificada:

<ul class="nav navbar-nav">

<!-- Click Here -->
<li class="dropdown mega-dropdown" id="mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="category">Mega Menu</a>

<!-- Show this mega menu -->
<ul class="dropdown-menu mega-dropdown-menu row" id="mega-dropdown-menu">
<li>Mega Menu Content</li>
</ul>
</li>
</ul>

Aqui está o meu JS atual:

$(document).ready(function(){
// Activate Overlay when Mega Menu is Open
$(document).on("click", function(){
var clicked = $(e.target);
if (clicked.is(".mega-dropdown-menu") || clicked.parents().is(".mega-dropdown-menu")) {
return;
} else {
$("#overlay").removeClass("open");
}
});

$("#mega-dropdown").on("click", function(){
if($("#mega-dropdown-menu").is(":visible") ) {
$("#overlay").removeClass("open");
} else {
$("#overlay").addClass("open");
}
});

});

// Prevent the menu from closing if user clicks inside the contianer
jQuery(document).on("click", "#mega-dropdown", function(e) {
e.stopPropagation();
})

Respostas:

A razão pela qual a sobreposição está desaparecendo é porque você está fechando. O gerenciador de cliques de mega dropdown deve ser o seguinte:

  $("#mega-dropdown").on("click", function(e){
if(!$("#mega-dropdown-menu").is(":visible") ) {
$("#overlay").addClass("open");
}
});