Javascript 当单击页面上的任意位置时隐藏单击触发的div时出现问题，同时仍保持所有内容可选

假设单击按钮时触发菜单，现在

1_uu要取消它，用户必须能够单击页面上的任何位置（而不仅仅是在同一按钮上）

2_u页面上的所有其他内容在整个过程中必须保持可选

以下是我尝试过的：

$（“.dad”）。单击（函数（）{
$（“.son”）.show（）；
$（“.mask”）.show（）；
});
$（“.mask”）。单击（函数（）{
$（“.son”）.hide（）；
$（“.mask”）.hide（）；
});
.dad{
背景：绿黄色；
宽度：20px；
高度：20px；
边缘顶部：100px；
z指数：2；
}
儿子{
位置：相对位置；
左：20px；
底部：100px；
宽度：100px；
高度：100px；
显示：无；
背景：番茄；
z指数：2；
}
p{
z指数：2；
}
.面具{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
显示：无；
}

这是一段

希望对您有所帮助


$（“.dad”）。单击（函数（）{
$（“.son”）.show（）；
});
$（文档）。单击（函数（e）{
var容器=$（“.dad”）；
如果（！container.is（e.target）&&
container.has（e.target）.length==0）{
$（“.son”）.hide（）；
}
});
.dad{
背景：绿黄色；
宽度：20px；
高度：20px；
边缘顶部：100px；
z指数：2；
}
儿子{
位置：相对位置；
左：20px；
底部：100px；
宽度：100px；
高度：100px；
显示：无；
背景：番茄；
z指数：2；
}
p{
z指数：2；
}

这是一段

删除掩码，并在
document.body
中添加一个额外的单击侦听器，该侦听器将关闭菜单。它可以进行一些修改：必须删除掩码。请修复这些部分，以便我可以接受它作为正确的答案。谢谢