不同屏幕尺寸下执行JS脚本实现侧边菜单栏自适应展开功能

问题根源 #

你当前的写法存在3个核心问题：

• 函数声明放在if块内属于块级作用域，全局作用域无法访问到openNav、closeNav函数，触发按钮点击后找不到执行逻辑，因此失效
• 页面加载时仅执行一次宽度判断，后续用户拖拽缩放窗口时，逻辑不会自动更新适配新的尺寸
• 小屏适配逻辑中设置main的marginLeft为250px属于逻辑错误，小屏菜单占满窗口宽度时，主内容不需要额外添加左边距

修复代码 #

将宽度判断逻辑移动到函数内部，每次触发菜单操作时实时判断当前窗口尺寸：

function openNav() {
  const currentWidth = $(window).width();
  let menuWidth = "250px";
  let mainMargin = "250px";
  // 小于600px时适配全屏宽度
  if (currentWidth < 600) {
    menuWidth = "100%";
    mainMargin = "0";
  }
  document.getElementById("myMenu").style.width = menuWidth;
  document.getElementById("main").style.marginLeft = mainMargin;
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("myMenu").style.width = "";
  document.getElementById("main").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}

可选优化：支持窗口缩放实时适配 #

如果需要在菜单打开状态下，用户拖拽缩放窗口时自动调整菜单尺寸，可以添加状态标记和resize事件监听：

// 记录菜单是否处于打开状态
let menuOpened = false;

function openNav() {
  menuOpened = true;
  const currentWidth = $(window).width();
  let menuWidth = "250px";
  let mainMargin = "250px";
  if (currentWidth < 600) {
    menuWidth = "100%";
    mainMargin = "0";
  }
  document.getElementById("myMenu").style.width = menuWidth;
  document.getElementById("main").style.marginLeft = mainMargin;
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  menuOpened = false;
  document.getElementById("myMenu").style.width = "";
  document.getElementById("main").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}

// 窗口尺寸变化时，若菜单处于打开状态自动更新适配
$(window).resize(() => {
  if (menuOpened) openNav();
})

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