我有一些 HTML 菜单，当用户点击这些菜单的顶部时，这些菜单会完全显示出来。当用户点击菜单区域之外的区域时，我想隐藏这些元素。就像这样...
我有一些 HTML 菜单，当用户点击这些菜单的顶部时，这些菜单会完全显示出来。当用户点击菜单区域之外的区域时，我想隐藏这些元素。
使用 jQuery 可以实现这样的效果吗？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
这里的其他解决方案对我来说不起作用所以我不得不使用：
if(!$(event.target).is('#foo'))
{
// hide menu
}
我使用此方法来处理单击下拉菜单外部时关闭下拉菜单的情况。
首先，我为组件的所有元素创建了一个自定义类名。该类名将添加到组成菜单小部件的所有元素中。
const className = `dropdown-${Date.now()}-${Math.random() * 100}`;
我创建了一个函数来检查点击次数和被点击元素的类名。如果被点击元素不包含我上面生成的自定义类名，则应将标志设置 show 为 false ，菜单将关闭。
const onClickOutside = (e) => {
if (!e.target.className.includes(className)) {
show = false;
}
};
然后我将点击处理程序附加到窗口对象。
// add when widget loads
window.addEventListener("click", onClickOutside);
...最后是一些琐事
// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);