Empêche la superposition de se fermer lorsque le clic est dans le menu méga

Question

Le méga menu et la superposition sont lancés lorsque vous cliquez sur # mega-dropdown. Lorsque vous cliquez sur les espaces dans le menu méga, la superposition est masquée. Je voudrais empêcher cela.

Voici mon balisage simplifié:

<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> 

Voici mon actuelle JS:

$(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(); 
}) 

Answer 1

La raison pour laquelle la superposition va loin est parce que vous le fermer. Le gestionnaire de clic méga-déroulant doit être le suivant:

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