:focus-within无法实现“点击元素外消失”，因其仅在内部子元素获焦时匹配，不响应外部点击；真正可行方案是JS监听全局click并用closest判断目标位置，同时对内部元素调用stopPropagation防止误关。
focus-within 无法实现“点击元素外消失”
它根本做不到。:focus-within 只在**其内部任一子元素获得焦点时**才匹配父容器，比如表单里输入框聚焦、按钮被 tab 进入——和“点击外部关闭”是两回事。你点外面，焦点可能移走、也可能没移（比如点的是空白区域或非可聚焦元素），:focus-within 不会因此失配，更不会触发隐藏逻辑。
为什么用 :focus-within + tabindex 模拟会失败
有人尝试给容器加 tabindex="-1" 再靠 :focus-within 控制显隐，但问题一堆：
- 容器本身不自动获取焦点，必须显式
.focus()或用户按 Tab 键进入，无法响应鼠标点击 - 点击外部后，焦点不一定丢失：若点的是
<div>、<code><span></span>这类默认不可聚焦元素，document.activeElement仍为 body 或之前聚焦的元素，:focus-within状态不变 - 即使焦点移出，CSS 无法监听“失焦”事件，
:focus-within是只读状态，不能触发 DOM 移除或 class 切换 - 移动端点击无焦点迁移行为，该方案基本不可用
- 给要控制的元素设一个唯一 class，如
js-dropdown - 监听
document.addEventListener('click', handler) - 在 handler 中用
event.target.closest('.js-dropdown')判断是否点击了该区域内部 - 不是内部点击，且当前元素处于展开态，就执行隐藏逻辑（比如加
is-hidden类）
真正可行的替代方案只有 JS 配合事件委托
要响应“点击元素外部”，必须用 JavaScript 监听全局 click 事件，并判断目标是否在目标元素及其子元素内：
注意：不要用 blur 事件模拟，blur 不可靠，尤其在元素含多个可聚焦子项（如 input + button）时，焦点在内部跳转也会触发 blur，导致误关。
容易被忽略的关键细节
很多人卡在“点击弹层内部按钮后弹层意外关闭”。这是因为事件冒泡：按钮点击后，click 事件会向上冒泡到 document 层，触发外部关闭逻辑。解决方式只有一条：event.stopPropagation() 必须加在所有内部可点击元素的 handler 上——包括下拉菜单里的选项、模态框的确认按钮、自定义关闭叉等。漏掉任意一个，就可能在不该关的时候关掉。
