Javascript 通过单击按钮或背景显示和隐藏内容

我试着制作一个内容，如果你点击一个按钮，它会被查看；如果你再次点击那个按钮，它会被隐藏；但是如果你点击旁边的任何地方，除了内容本身，它也会被隐藏
如果您单击教程，请单击“打开”
我的尝试是：

$（“：not（#content）”）。单击

无效。但即使如此，它也会在内容无论如何都不可见的时候被触发。没有好的代码

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#内容”）.toggle（）；
});
$（“：非（#内容）”）。单击（函数（）{
$（“#内容”）.hide（）；
});
});

这就是内容
转换
这是其他地方
如果单击的元素不是按钮或包含在内容中，则可以将单击事件侦听器添加到隐藏内容的文档中


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#内容”）.toggle（）；
});
$（文档）。单击（函数（e）{
if（！$（e.target）.closest（'button，#content'）.length）{
$（“#内容”）.hide（）；
}
});
});

这就是内容
转换
这是其他地方
内容不再显示，因为当您单击“开关”时，两个事件都会触发。如果需要防止另一个外部单击事件，请使用
event.stopperPagation（）
和
event.cancelBubble=true

对这两行进行注释，您将看到区别


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（事件）{
console.log（“单击按钮”）；
event.stopPropagation（）；
event.cancelBubble=true；
$（“#内容”）.toggle（）；
});
$（“正文”）。单击（函数（）{
console.log（“单击外部”）；
$（“#内容”）.hide（）；
});
});

这就是内容
转换
这是其他地方
这个问题类似于@nilsd我的答案对你有用吗？$event.stopPropagation（）；如果“$”在前面，它也适用于运行时创建的按钮$（document）.ready（function（）{$（document）.on（'click'，'.sorting'，function（）{/$（.sorting”）.on（'click'，function（）{/$（.button”）.click（function（）{alert（“clicked the button”）；$（this）.after（'new button'）；$event.stopPropagation（）；）；/$（document）.on（'click'，document document，function（）{$（document）.click（function（））{警报（“已单击文档”）；}；}）；