实现汉堡按钮与页面任意区域点击关闭侧边栏的jQuery方案

安全阿岳

2026-8-14

侧边栏关闭功能需求与解决方案

需求描述

我使用HTML和CSS制作了一个侧边栏，通过ID为#check的汉堡按钮点击触发显示。希望实现以下两个功能：

点击汉堡按钮可关闭侧边栏
点击页面其余任意区域也能关闭侧边栏

目前我有两段jQuery代码，分别只能实现单一功能，无法合并达成需求：

仅通过按钮开关的代码

//button id in html is #check
//button only toggle on/off
$(document).ready(function() {
  $('#check').on("click",function(event) {
        if ($(event.target).closest("#check").length === 0) {
              $("#check").prop("checked", false);
        }
  });
});

仅通过页面其他区域开关的代码

//button id in html is #check
//window only toggle on/off
$(document).ready(function() {
  $(document).on("click",function(event) {
        if ($(event.target).closest("#check").length === 0) {
              $("#check").prop("checked", false);
        }
  });
});

解决方案

可以将两个逻辑整合到一个文档点击事件监听中，通过判断点击目标来执行对应操作：

$(document).ready(function() {
  $(document).on("click", function(event) {
    const $checkBtn = $("#check");
    // 判断点击目标是否属于汉堡按钮（含内部子元素）
    const isClickOnBtn = $(event.target).closest("#check").length > 0;

    if (isClickOnBtn) {
      // 点击按钮时，切换选中状态实现侧边栏开关
      $checkBtn.prop("checked", !$checkBtn.prop("checked"));
    } else {
      // 点击其他区域时，直接关闭侧边栏
      $checkBtn.prop("checked", false);
    }
  });
});