基于Astro框架实现高性能点击外部关闭下拉按钮的方案问询

核心优化思路 #

不用全局遍历所有下拉菜单，而是只跟踪当前打开的菜单，结合事件委托和closest()方法做精准判断，避免不必要的DOM查询和循环，性能更优。

完整实现代码 #

1. 调整HTML（给按钮加tabindex="0"保证可聚焦，优化键盘导航体验）

<nav class="hidden items-center lg:relative  lg:mt-0 lg:!flex lg:basis-auto"><!-- Desktop Navigation -->
  <ul class="list-style-none mr-auto flex flex-col pl-0 lg:flex-row">
    {navData.map(data => {
      if(data.dropdown === true) {
        return (
          <li data-title={data.title} class="sm:block relative dropdowns mx-2 lg:flex ">
            <button tabindex="0" data-title={data.title} class="dropdown text-sm rounded flex gap-1  items-center">
              {data.title}
              <svg viewBox="0 0 1024 1024" class="icon w-3" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                <g id="SVGRepo_iconCarrier">
                  <path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" ></path>
                </g>
              </svg>
            </button>
            <div data-title={data.title} class="absolute right-0 top-7 mt-2 w-48 bg-gray-800 rounded-md overflow-hidden z-10 hidden">
              {data.subcat.map(el => (
                <a href={el.slug} class="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-700">{el.title}</a>
              ))}
            </div>
          </li>
        )
      } else {
        return (
          <li class="mb-4 pl-2 lg:mb-0 lg:pl-0 lg:pr-1" data-te-nav-item-ref>
            <a class="p-0 text-sm transition duration-200  hover:ease-in-out   motion-reduce:transition-none lg:px-2" href={`${data.slug}`} data-te-nav-link-ref>{data.title}</a>
          </li>
        )
      }
    })}
  </ul>
</nav>

2. 优化后的JS代码

// 存储当前打开的下拉菜单元素
let activeDropdown = null;

const dropdownToggle = document.querySelectorAll('.dropdown');
const dropdownMenu = document.querySelectorAll('.dropdowns > div');

// 绑定按钮点击事件
dropdownToggle.forEach(button => {
  button.addEventListener('click', () => {
    // 找到对应标题的菜单
    const targetMenu = [...dropdownMenu].find(el => el.dataset.title === button.dataset.title);
    if (!targetMenu) return;

    // 切换当前菜单状态
    const isHidden = targetMenu.classList.contains('hidden');
    // 先关闭之前打开的菜单
    if (activeDropdown && activeDropdown !== targetMenu) {
      activeDropdown.classList.add('hidden');
    }
    // 切换当前菜单
    targetMenu.classList.toggle('hidden', !isHidden);
    // 更新活跃菜单
    activeDropdown = isHidden ? targetMenu : null;
  });
});

// 全局点击监听，仅在有活跃菜单时触发判断
document.addEventListener('click', (e) => {
  if (!activeDropdown) return;

  // 判断点击区域是否在下拉容器（按钮+菜单）内部
  const isInsideDropdown = e.target.closest('.dropdowns');
  if (!isInsideDropdown) {
    activeDropdown.classList.add('hidden');
    activeDropdown = null;
  }
}, { passive: true }); // passive设为true提升滚动性能

// 处理键盘ESC关闭菜单（优化无障碍体验）
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && activeDropdown) {
    activeDropdown.classList.add('hidden');
    activeDropdown = null;
  }
});

性能优势说明 #

• 减少DOM查询次数：仅在点击按钮时查找对应菜单，全局监听仅当有活跃菜单时才执行判断
• 避免冗余遍历：用activeDropdown跟踪当前打开的菜单，无需每次循环所有下拉元素
• 高效区域判断：closest()方法比手动遍历DOM层级更高效，精准定位点击区域
• 不阻塞滚动：全局点击事件设置passive: true，不会干扰浏览器滚动流畅度

关于focus-within失效的原因 #

之前的CSS方案未生效，是因为按钮默认点击后不会保持聚焦状态。添加tabindex="0"后focus-within可生效，但该方案仅覆盖键盘操作场景，无法处理鼠标点击外部的需求，因此仍需JS配合完成完整功能。

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