点击移动端toggle菜单展开后自动关闭该如何解决

问题原因 #

你遇到的自动关闭是事件冒泡导致的：
你绑定的两类点击事件都挂载在document上：

• 点击toggle按钮的委托事件：负责打开/关闭菜单
• 全局document点击事件：负责点击菜单外区域时关闭菜单

当你点击toggle按钮时，先触发toggle的逻辑把菜单打开，随后点击事件冒泡到document层，触发全局关闭逻辑，就会把刚打开的菜单立刻关掉。部分场景下是因为你点击的是toggle内部的<i>图标，原全局点击的容器判定逻辑没有识别到这属于toggle内部的点击，就触发了关闭操作，同时你原代码中插入按钮的HTML写法存在多余空格，也可能导致DOM结构解析异常触发该问题。

修复方法 #

只需要给toggle和菜单内部的点击事件加阻止冒泡逻辑，同时修正HTML写法即可，修改后的完整代码如下：

if ($('.nav-menu').length) { 
  var $mobile_nav = $('.nav-menu').clone().prop({ class: 'mobile-nav d-lg-none' }); 
  $('body').append($mobile_nav); 
  // 修复原代码HTML标签多余空格问题，避免DOM解析异常
  $('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>'); 
  $('body').append('<div class="mobile-nav-overly"></div>'); 

  $(document).on('click', '.mobile-nav-toggle', function(e) {
    // 新增：阻止点击事件冒泡到document层，避免触发全局关闭逻辑
    e.stopPropagation();
    $('body').toggleClass('mobile-nav-active'); 
    $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close'); 
    $('.mobile-nav-overly').toggle(); 
  }); 

  $(document).on('click', '.mobile-nav .drop-down > a', function(e) { 
    e.preventDefault(); 
    $(this).next().slideToggle(300); 
    $(this).parent().toggleClass('active'); 
  }); 

  // 新增：阻止点击菜单内部时事件冒泡，避免点击菜单内容误关
  $(document).on('click', '.mobile-nav', function(e) {
    e.stopPropagation();
  });

  $(document).click(function(e) { 
    var container = $(".mobile-nav, .mobile-nav-toggle"); 
    if (!container.is(e.target) && container.has(e.target).length === 0) { 
      if ($('body').hasClass('mobile-nav-active')) { 
        $('body').removeClass('mobile-nav-active'); 
        $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close'); 
        $('.mobile-nav-overly').fadeOut(); 
      } 
    } 
  }); 
} else if ($(".mobile-nav, .mobile-nav-toggle").length) { 
  $(".mobile-nav, .mobile-nav-toggle").hide(); 
}

内容的提问来源于stack exchange，提问作者Mohd Atiq