如何实现点击侧边导航外部及屏幕宽度＞600px时关闭移动端侧边导航（附现有开闭导航JS代码）

嘿，我来帮你搞定这两个需求！咱们一步步调整代码，实现点击外部关闭导航，以及屏幕尺寸变化时自动关闭的功能：

一、点击侧边导航外部区域时关闭导航 #

要实现这个功能，我们可以给整个文档添加点击事件监听，判断点击的目标是否属于侧边导航或者触发打开导航的元素（比如汉堡按钮），如果都不是，就调用关闭函数。同时要阻止侧边导航内部的点击事件冒泡，避免误触发关闭。

修改后的代码如下：

// 原有打开关闭函数
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

// 点击外部关闭导航
document.addEventListener('click', function(e) {
  const sidenav = document.getElementById("mySidenav");
  const openButton = document.querySelector('.open-btn'); // 假设你的打开按钮有这个类，记得替换成实际选择器
  // 判断点击元素不是侧边栏、不是打开按钮，且侧边栏处于打开状态
  if (!sidenav.contains(e.target) && e.target !== openButton && sidenav.style.width === "250px") {
    closeNav();
  }
});

// 阻止侧边栏内部点击事件冒泡，避免误关闭
document.getElementById("mySidenav").addEventListener('click', function(e) {
  e.stopPropagation();
});

注意：记得把.open-btn替换成你实际用来打开侧边导航的按钮选择器，比如它的id或者专属class。

二、屏幕宽度＞600px时自动关闭导航 #

我们可以监听window.resize事件，每次窗口尺寸变化时检查当前屏幕宽度，如果超过600px且侧边导航处于打开状态，就调用关闭函数。为了避免拖动窗口时频繁触发事件影响性能，推荐加个防抖处理：

添加以下代码：

// 防抖函数（可选但推荐）
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 监听窗口大小变化
window.addEventListener('resize', debounce(function() {
  const sidenav = document.getElementById("mySidenav");
  if (window.innerWidth > 600 && sidenav.style.width === "250px") {
    closeNav();
  }
}));

防抖函数的作用是让resize事件停止触发100毫秒后再执行关闭逻辑，避免频繁操作占用资源。如果不需要防抖，可以直接去掉debounce包裹，把函数直接传入addEventListener。

完整整合代码 #

把所有代码放在一起就是这样：

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

// 点击外部关闭导航
document.addEventListener('click', function(e) {
  const sidenav = document.getElementById("mySidenav");
  const openButton = document.querySelector('.open-btn'); // 替换为你的打开按钮选择器
  if (!sidenav.contains(e.target) && e.target !== openButton && sidenav.style.width === "250px") {
    closeNav();
  }
});

// 阻止侧边栏内部点击冒泡
document.getElementById("mySidenav").addEventListener('click', function(e) {
  e.stopPropagation();
});

// 防抖函数
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 屏幕宽度变化时自动关闭
window.addEventListener('resize', debounce(function() {
  const sidenav = document.getElementById("mySidenav");
  if (window.innerWidth > 600 && sidenav.style.width === "250px") {
    closeNav();
  }
}));

这样就完美实现你要的两个功能啦！测试一下：点击侧边栏外的区域会关闭导航，把窗口拉大到超过600px时导航也会自动关闭~

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