Javascript 失去焦点时反应隐藏下拉菜单

我正在YouTube上关注Fireship的视频。完成视频后，我注意到菜单一直保持打开状态，直到页面重新加载。有没有办法让它在失去焦点时消失，例如当用户在菜单外单击时？不仅当用户单击导航图标时。

假设

按钮是下拉触发元素的参考，并且
isOpen
添加一个类以打开下拉列表：

const [isOpen, setIsOpen] = useState(false);
const button = useRef(null);
useEffect(() => window.addEventListener('click', ev => {
    if(button.current && button.current.contains(ev.target)) {setIsOpen(!isOpen)}
    else {setIsOpen(false)}
}));

在DOM上，触发器元素：

<div ref={button}>...</div>

。。。

下拉菜单

<div className={isOpen ? 'open' : ''}>...</div>

。。。
下拉列表的参考是一个div，而不是一个按钮。您可以修改代码以使用div吗？它不知道它是什么元素<代码>按钮

只是一个变量名。。在您的div add

…

上，我得到以下错误：TypeError:Failed to execute'contains'on'Node'：当我单击屏幕时，参数1不是'Node'类型。我的错误。您应该获得

current

值：

button.current&&button.current.contains（ev.target）

您的代码将button.current更改为button.current时出现了一个小错误。我不能这样做，因为6个字符的最小需要改变。我相信这是你正在寻找的。