在大型菜单中单击时防止覆盖关闭

Question

单击#mega-dropdown 时会启动大型菜单和叠加层。当您单击大型菜单中的空格时，叠加层将被隐藏。我想阻止这种情况。

这是我的简化标记：

<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');
    }
  });

在大型菜单中单击时防止覆盖关闭

Prevent overlay from closing when click is in mega menu

jquery

overlay

megamenu