如何实现点击侧边导航栏本体关闭，替代右上角关闭按钮？

这个功能完全可行，以下是具体的修改方案：

方案1：点击侧边栏任意区域（包括链接）都关闭 #

修改你的JavaScript代码，给侧边栏添加点击事件监听，点击时直接触发关闭逻辑：

function openNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "250px";
  // 打开侧边栏后绑定点击关闭事件
  sidenav.addEventListener('click', closeNav);
}

function closeNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "0";
  // 关闭后移除事件监听，避免重复绑定
  sidenav.removeEventListener('click', closeNav);
}

方案2：仅点击侧边栏空白区域关闭，点击链接不触发关闭 #

如果希望点击侧边栏内的链接时正常跳转，不关闭侧边栏，可以通过判断点击目标来实现：

function openNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "250px";
  sidenav.addEventListener('click', handleSidenavClick);
}

function closeNav() {
  const sidenav = document.getElementById("mySidenav");
  sidenav.style.width = "0";
  sidenav.removeEventListener('click', handleSidenavClick);
}

function handleSidenavClick(e) {
  // 仅当点击的是侧边栏本身（而非子元素）时执行关闭
  if (e.target === document.getElementById("mySidenav")) {
    closeNav();
  }
}

补充HTML结构示例 #

确保你的页面包含对应的触发按钮和侧边栏容器，示例结构如下：

<!-- 打开侧边栏的按钮 -->
<button onclick="openNav()">打开侧边栏</button>

<!-- 侧边栏容器 -->
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">导航链接1</a>
  <a href="#">导航链接2</a>
  <a href="#">导航链接3</a>
</div>

原有的CSS代码无需修改，它已经正确设置了侧边栏的固定定位、宽度过渡等样式。

内容的提问来源于stack exchange，提问作者D.Mann