如何在小屏幕将导航栏菜单替换为汉堡图标？解决大屏图标残留问题

问题根源 #

你在小屏模式下用.html()直接替换了.mobileMenu的内容，把原本的<ul>菜单给删掉了。当屏幕尺寸变大回到大屏模式时，调用$(".mobileMenu ul").show()根本找不到对应的元素，自然没法恢复菜单，必须刷新页面重新渲染才能找回<ul>。另外用setInterval轮询检测屏幕尺寸，完全是没必要的性能浪费。

修复方案 #

1. 调整HTML结构

提前把汉堡图标加到DOM里，默认隐藏，避免后续替换DOM结构：

<div class="mobileMenu">
  <i class="fa fa-bars" style="display: none;"></i>
  <ul>
    <li><a href="#">button a</a></li>
    <li><a href="#">button b</a></li>
    <li><a href="#">button c</a></li>
    <li><a href="#">button d</a></li>
  </ul>
</div>

2. 优化JS逻辑

用媒体查询的监听事件替代定时器，只在屏幕尺寸变化触发媒体查询状态改变时执行逻辑，同时只切换元素的显示/隐藏，不删除原有DOM：

const mbp = window.matchMedia("(max-width: 425px)");

// 定义菜单状态处理函数
function handleMenuDisplay(e) {
  const $hamburger = $(".mobileMenu .fa-bars");
  const $menuList = $(".mobileMenu ul");
  
  if (e.matches) {
    $menuList.hide();
    $hamburger.show();
  } else {
    $menuList.show();
    $hamburger.hide();
  }
}

// 页面加载时先执行一次，确保初始状态正确
handleMenuDisplay(mbp);

// 监听屏幕尺寸变化
mbp.addEventListener("change", handleMenuDisplay);

3. 可选：添加汉堡图标点击展开功能

如果需要点击汉堡图标显示/隐藏菜单，再加一段点击事件逻辑：

$(".fa-bars").on("click", function() {
  $(".mobileMenu ul").toggle();
});

为什么这样改 #

• 保留原始DOM结构，只是切换显示状态，不会出现大屏模式下找不到菜单元素的问题
• 媒体查询的change事件只在状态变化时触发，比定时器轮询更高效
• 初始化时执行一次处理函数，避免页面刚加载就处于错误的显示状态

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