如何实现点击菜单项或页面任意区域后侧边栏自动关闭

轻伟君_8428

发布时间：2026-11-07 13:16:10

710人浏览过

来源于php中文网

原创

如何实现点击菜单项或页面任意区域后侧边栏自动关闭

本文详解如何让响应式侧边栏在用户点击导航链接、页面空白处时自动收起，仅在点击菜单图标时展开，避免误触发，并提供兼容 jquery 的完整可运行代码。

本文详解如何让响应式侧边栏在用户点击导航链接、页面空白处时自动收起，仅在点击菜单图标时展开，避免误触发，并提供兼容 jquery 的完整可运行代码。

要实现“点击菜单项或页面任意区域关闭侧边栏，仅点击汉堡图标才打开”的交互效果，关键在于精准识别点击目标（event.target），防止点击侧边栏自身或其内部元素（如菜单链接、关闭按钮）时意外关闭。

原代码中使用 $('body').on('click', ...) 直接关闭侧边栏，会导致点击侧边栏内任意位置（包括链接和 × 按钮）也触发关闭——这违背了用户体验：用户打开菜单后理应能自由点击选项或手动关闭，而非一碰就消失。

✅ 正确做法是：仅当点击目标既不是菜单图标（#drawer-opener），也不是侧边栏（.sidenav）及其子元素时，才执行关闭逻辑。我们通过 jQuery 的 .is() 和 .closest() 方法组合判断：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000; /* 提升层级，确保覆盖内容 */
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: width 0.5s ease;
  border-right: 1px solid #ccc;
}
.sidenav a {
  padding: 12px 16px;
  margin: 4px 8px;
  text-decoration: none;
  font-size: 1rem;
  color: #333;
  display: block;
  transition: background-color 0.3s;
  border-radius: 4px;
}
.sidenav a:hover {
  background-color: #f5f5f5;
}
</style>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#cars">Cars</a>
  <a href="#planes">Planes</a>
  <a href="#boats">Boats</a>
  <a href="#cycles">Cycles</a>
</div>

<!-- 增加唯一 ID 并移除内联 onclick，改用事件委托更规范 -->
<span id="drawer-opener" style="font-size:1.5em; cursor:pointer; position: relative; z-index: 1001;">&#9776;</span>

<body>
  <p>Some random text. Scroll down to see more.</p>
  <p>Click any link above or anywhere outside the sidebar to close it.</p>
  <p>The sidebar stays open when you click inside it — including links and the × button.</p>
</body>

<script>
$(document).ready(function() {
  // 点击全局 body：仅当点击目标不在侧边栏及其触发器上时关闭
  $('body').on('click', function(e) {
    const $target = $(e.target);
    const isOpener = $target.is('#drawer-opener') || $target.closest('#drawer-opener').length > 0;
    const isSidebar = $target.closest('.sidenav').length > 0;

    if (!isOpener && !isSidebar) {
      $('#mySidenav').css('width', '0');
    }
  });

  // 使用事件委托处理 opener 点击（替代内联 onclick）
  $('#drawer-opener').on('click', openNav);
});

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

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

? 关键优化说明：

✅ 防误关机制：$target.closest('.sidenav') 确保点击侧边栏任意后代元素（含 <a></a> 和 ×）均不触发关闭；
✅ 触发器保护：$target.is('#drawer-opener') || $target.closest('#drawer-opener') 兼容直接点击图标及子元素（如图标内嵌 span）；
✅ 语义化与可维护性：移除内联 onclick，统一交由 jQuery 事件委托管理；
✅ 视觉体验增强：添加 z-index 层级控制、悬停反馈和圆角，提升交互质感。