移动端响应式导航菜单从窄屏切回全屏后消失问题

问题场景 #

• 全屏状态（屏幕宽度>767px）：主导航菜单正常显示
• 移动端状态（屏幕宽度≤767px）：点击汉堡图标（ion-navicon-round），菜单正常展开，图标切换为关闭叉号（ion-close-round）
• 异常状态：从移动端窗口放大回全屏时，主导航菜单消失，无法正常显示

你遇到的问题核心有两个：一是窗口resize时没有实时获取当前宽度，导致判断逻辑失效；二是点击事件里的slideToggle和手动调用slideDown()/slideUp()造成了状态冲突，加上resize时没同步图标状态，最终导致全屏菜单消失。

问题代码的核心缺陷 #

• 你在resize事件外定义了var width = $(window).width();，这个值只会在页面加载时获取一次，resize时不会更新，所以判断if(width >= 768)永远用的是初始宽度，逻辑根本没生效。
• 点击事件里已经用了nav.slideToggle(200)处理菜单的显示隐藏，后面又手动调用slideDown()/slideUp()，这会导致菜单的显示状态被重复修改，造成状态混乱。

修正后的完整代码 #

HTML部分（保持不变）

<!-- HTML code -->
<ul class="main-nav js--main-nav">
  <li><a href="#features">Food delivery</a></li>
  <li><a href="#works">How it works</a></li>
  <li><a href="#cities">Our cities</a></li>
  <li><a href="#plans">Sign up</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>

jQuery部分（修复逻辑）

/* Mobile Navigation*/
$('.js--nav-icon').click(function() {
  var nav = $('.js--main-nav');
  var icon = $('.js--nav-icon i');
  
  // 只用slideToggle处理菜单显示隐藏，避免重复操作
  nav.slideToggle(200);
  
  // 切换图标类，简化写法
  icon.toggleClass('ion-navicon-round ion-close-round');
});

// 窗口resize事件：实时获取宽度，同步菜单和图标状态
$(window).resize(function(){
  var currentWidth = $(window).width();
  var nav = $('.js--main-nav');
  var icon = $('.js--nav-icon i');
  
  if(currentWidth >= 768){
    // 全屏状态下强制显示菜单，并切换回汉堡图标
    nav.css('display', 'block');
    icon.removeClass('ion-close-round').addClass('ion-navicon-round');
  }
});

额外优化建议 #

窗口resize事件在拖动窗口时会频繁触发，可能影响性能，建议添加防抖函数减少触发次数：

// 防抖函数：延迟执行resize逻辑，避免频繁触发
function debounce(func, wait) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

// 用防抖包裹resize事件
$(window).resize(debounce(function(){
  var currentWidth = $(window).width();
  var nav = $('.js--main-nav');
  var icon = $('.js--nav-icon i');
  
  if(currentWidth >= 768){
    nav.css('display', 'block');
    icon.removeClass('ion-close-round').addClass('ion-navicon-round');
  }
}, 200)); // 200ms延迟，可根据需求调整

这样修改后，不管是从移动端切换回全屏，还是全屏切换到移动端，菜单和图标的状态都会保持正确，不会出现菜单消失的问题。

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