如何实现点击页面任意区域自动关闭侧边导航菜单？

阿华AIGC实验室

2026-5-14

嘿，我来帮你搞定点击页面任意位置关闭侧边导航的问题！你的思路完全正确，只需要加几行代码就能实现，不过得注意区分点击区域——不然点侧边栏本身也会关掉，体验就糟了。

先提个你代码里的小bug：侧边栏里的<h2>标签都闭合错了，比如<h2>Position #1</a></h2>应该改成<h2>Position #1</h2>，不然会导致HTML结构混乱，先把这个修好。另外你CSS里的@media规则少了个冒号，我也一起帮你修正了。

核心解决方案

我们需要给整个文档添加点击事件监听，但只有当点击的区域不是侧边栏、也不是触发打开菜单的按钮，并且侧边栏处于打开状态时，才调用关闭函数。

以下是完整的修正代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { }
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 99999;
top: 0px;
right: 0px;
background-color: #111;
overflow-x: hidden;
overflow-y: auto;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<h2>Position #1</h2>
<h2>Position #2</h2>
<h2>Position #3</h2>
<h2>Position #4</h2>
<h2>Position #5</h2>
<h2>Position #6</h2>
<h2>Position #7</h2>
<h2>Position #8</h2>
<h2>Position #9</h2>
<h2>Position #10</h2>
</div>
<span id="menuBtn" style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776;Menu</span>

<script>
const sidenav = document.getElementById("mySidenav");
const menuBtn = document.getElementById("menuBtn");

function openNav() {
  sidenav.style.width = "250px";
}

function closeNav() {
  sidenav.style.width = "0";
}

// 监听页面全局点击事件
document.addEventListener('click', function(e) {
  // 判断逻辑：侧边栏已打开，且点击目标不是侧边栏内部，也不是菜单按钮
  if (sidenav.style.width === "250px" && !sidenav.contains(e.target) && e.target !== menuBtn) {
    closeNav();
  }
});
</script>
</body>
</html>

关键逻辑说明

先提前获取侧边栏和菜单按钮的DOM元素，方便后续判断
给document绑定全局点击监听，每次页面点击都会触发这个函数
判断条件里：
1. 先确认侧边栏处于打开状态（宽度为250px）
2. 用!sidenav.contains(e.target)确保点击的不是侧边栏内部的元素（比如菜单选项、关闭按钮）
3. 用e.target !== menuBtn确保点击的不是打开菜单的按钮
只有同时满足以上条件，才会调用closeNav()关闭侧边栏

这样修改后，点击页面任意非侧边栏、非菜单按钮的区域，侧边栏就会自动关闭，同时点击侧边栏内部或者菜单按钮不会触发关闭，体验更合理。

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