支持失焦与外部点击关闭的下拉菜单 | 星雨笔录
实现可通过外部点击或失焦关闭的菜单。
核心: 下拉菜单打开后要支持 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; });
学完能做: 实现可通过外部点击或失焦关闭的菜单。