如何仅用JavaScript实现点击文档空白处关闭所有侧边栏？

我开发了一个侧边栏功能，列表中的触发链接通过data-sidebar属性与对应侧边栏绑定，点击链接可打开指定侧边栏。但点击文档空白处关闭所有侧边栏的功能无法生效，且需保证侧边栏内的链接能正常工作，附上代码请排查错误：

原JavaScript代码 #

const sidebarTrigger = document.querySelectorAll(".js-sidebar-trigger");

// console.log(sidebar);

sidebarTrigger?.forEach(btn => {
  const name = btn.dataset.sidebar;
  const sidebar = document.querySelector(".js-sidebar-" + name);
  btn.addEventListener("click", function(e) {
    e.preventDefault();
    opensidebar(sidebar);
  });
});

function opensidebar(el) {
  el.classList.add("translate-x-0");
  el.classList.remove("translate-x-full");
  document.body.style.overflow = "hidden";
}

function closesidebar(el) {
  el.classList.add("translate-x-full");
  el.classList.remove("translate-x-0");
  document.body.style.overflow = "";
}


document.addEventListener("click", function(e) {
  sidebarTrigger?.forEach(btn => {
    const name = btn.dataset.sidebar;
    const sidebar = document.querySelector(".js-sidebar");
    const sidebarName = document.querySelector(".js-sidebar-" + name);

    if (!btn.contains(e.target) && !sidebar.classList.contains("translate-x-0")) {
      closesidebar(sidebarName);
    }
  });
});

原CSS代码 #

* {
  box-sizing: border-box;
}

.js-sidebar {
  position: fixed;
  width: 200px;
  top: 0;
  bottom: 0;
  right: 0;
  background: #ccc;
  padding: 2rem;
}

.translate-x-full {
  transform: translateX(100%);
}

.translate-x-0 {
  transform: translateX(0);
}

原HTML代码 #

<ul>
  <li>
    <a class="js-sidebar-trigger" data-sidebar="one" href="#home">sidebar 1</a>

    <div class="translate-x-full js-sidebar js-sidebar-one">
      1
    </div>
  </li>
  <li>
    <a class="js-sidebar-trigger" data-sidebar="two" href="#home">sidebar 2</a>

    <div class="translate-x-full js-sidebar js-sidebar-two">
      2
    </div>
  </li>
  <li>
    <a class="js-sidebar-trigger" data-sidebar="three" href="#home">sidebar 3</a>

    <div class="translate-x-full js-sidebar js-sidebar-three">
      <a href="#link">3</a>
    </div>
  </li>
</ul>

错误分析 #

1. 全局点击事件逻辑错误：

   • document.querySelector(".js-sidebar")只会获取第一个侧边栏元素，无法正确判断所有侧边栏的状态
   • 条件!sidebar.classList.contains("translate-x-0")逻辑颠倒，应该判断侧边栏处于打开状态（包含translate-x-0）时才执行关闭操作
   • 遍历所有触发器时重复执行关闭操作，造成冗余DOM操作

2. 未处理侧边栏内部点击：

   • 点击侧边栏内的链接时，原逻辑会触发关闭操作，导致内部链接无法正常跳转

修复后的JavaScript代码 #

const sidebarTrigger = document.querySelectorAll(".js-sidebar-trigger");
const sidebars = document.querySelectorAll(".js-sidebar");

// 绑定触发器点击事件
sidebarTrigger?.forEach(btn => {
  const name = btn.dataset.sidebar;
  const sidebar = document.querySelector(`.js-sidebar-${name}`);
  btn.addEventListener("click", function(e) {
    e.preventDefault();
    // 先关闭其他已打开的侧边栏
    sidebars.forEach(sb => {
      if (sb !== sidebar) closesidebar(sb);
    });
    opensidebar(sidebar);
  });
});

function opensidebar(el) {
  el.classList.add("translate-x-0");
  el.classList.remove("translate-x-full");
  document.body.style.overflow = "hidden";
}

function closesidebar(el) {
  el.classList.add("translate-x-full");
  el.classList.remove("translate-x-0");
  // 只有当所有侧边栏都关闭时，恢复页面滚动
  const hasOpenSidebar = Array.from(sidebars).some(sb => sb.classList.contains("translate-x-0"));
  if (!hasOpenSidebar) {
    document.body.style.overflow = "";
  }
}

// 全局点击关闭逻辑
document.addEventListener("click", function(e) {
  // 判断点击目标是否属于触发器或侧边栏内部元素
  const isTrigger = e.target.closest(".js-sidebar-trigger");
  const isSidebar = e.target.closest(".js-sidebar");
  
  if (!isTrigger && !isSidebar) {
    // 点击空白处关闭所有侧边栏
    sidebars.forEach(closesidebar);
  }
});

修复说明 #

• 新增sidebars变量获取所有侧边栏元素，支持批量操作
• 点击触发器时自动关闭其他侧边栏，避免多侧边栏同时打开
• 使用closest()方法精准判断点击范围，确保侧边栏内的链接可正常点击
• 优化滚动恢复逻辑，只有所有侧边栏关闭后才恢复页面滚动

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