支持失焦与外部点击关闭的下拉菜单 | 星雨笔录

实现可通过外部点击或失焦关闭的菜单。

核心: 下拉菜单打开后要支持 Escape、点击外部和焦点离开等合理关闭方式。

最小示例:

const menu = document.querySelector('#menu');
document.addEventListener('click', e => { if (!menu.contains(e.target)) menu.hidden = true; });
document.addEventListener('keydown', e => { if (e.key === 'Escape') menu.hidden = true; });

学完能做: 实现可通过外部点击或失焦关闭的菜单。