防止在点击处于大型菜单时关闭覆盖图

Question

当您单击＃mega-dropdown时，会启动大型菜单和覆盖图。 当您单击mega菜单中的空格时，叠加层将被隐藏。我想阻止这一点。

这里是我的简化的标记：

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

这是我目前的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

原因的叠加会消失是因为你关闭它。该大型下拉菜单单击处理程序应该是以下几点：

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