移动端触发汉堡菜单交互后，拉伸至大屏导航栏永久消失的适配异常

所有异常的核心来自jQuery动画方法生成的内联样式优先级高于CSS媒体查询规则。
具体逻辑链：

• slideToggle方法本质是动态修改元素的display内联样式，以此实现滑动展开/收起的过渡效果。
• 当用户在移动端点击两次汉堡按钮（展开导航再收起导航），jQuery会给.navbar-list元素留下永久生效的内联样式display: none。
• 内联样式的权重远高于外部CSS、媒体查询中的同选择器样式，因此当屏幕被拉伸回桌面端尺寸时，媒体查询中定义的.navbar-list { display: block }规则会被内联的display: none直接覆盖，导航栏就会永久隐藏。

1. 补充窗口尺寸变化的状态重置逻辑 #

在现有JS代码末尾添加resize事件监听，屏幕切回桌面端时清除jQuery残留的内联样式和切换类名，让样式完全回归CSS规则控制：

// 监听窗口尺寸变化，重置导航状态
$(window).resize(function() {
  const currentWidth = $(window).outerWidth();
  // 当宽度超过540px的移动端断点时执行重置
  if (currentWidth > 540) {
    // 清除内联display样式，让CSS默认规则生效
    $('.navbar-list').css('display', '');
    // 移除移动端展开时添加的背景、遮罩类
    $('.navbar-list').removeClass('background selected');
    // 重置汉堡图标为默认的折叠状态
    $('#mobile-nav-icon').attr('src', './images/icon-hamburger.svg');
  }
});

2. 修正原有图标切换的逻辑bug #

原JS代码中src1和src2两个变量都指向关闭图标路径，图标切换功能完全失效，需要修正变量定义：

// 修正两个图标的路径指向
var src1 = "./images/icon-hamburger.svg"; // 默认汉堡菜单图标
var src2 = "./images/icon-close.svg";     // 展开后的关闭图标

后续可以把所有导航显隐逻辑从jQuery直接操作DOM样式的方式，改为CSS类名控制：

• 定义专门的.nav-open类，在CSS中写好展开、收起的滑动过渡效果
• jQuery只负责切换类名，不直接修改元素内联样式，从根源上避免内联样式和媒体查询的优先级冲突

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