JavaScript-当单击某个按钮之外的内容时，如何运行函数？

我有一个菜单，我想在单击按钮时显示/切换，在单击按钮之外的文档部分时隐藏。我一直在尝试一些事情，正如你在这里看到的：

// $('.dropdown-toggle').click(function()
// {
    // $('.dropdown-menu').show();
// });
$(document).click(function()
{
    // if ($(this).hasClass('dropdown-toggle'))
        // $('.dropdown-menu').toggle();
    if ($(this).not('[dropdown-toggle]'))
        $('.dropdown-menu').toggle();
});

如果我取消注释顶部，由于某种原因，当单击按钮之外的文档部分时，菜单将切换，而当单击按钮时，菜单将不会执行任何操作。如果我对该部分进行注释并取消对第一条If语句的注释（即使我将“toggle”替换为“show”），则无论我单击文档的哪个部分，该按钮都将进行切换

编辑：我解决了部分问题。看起来，当我取消注释顶部部分（下拉切换类的click listener）时，菜单会显示，然后立即切换，所以它会隐藏。如果我将“显示”更改为“隐藏”，我会使其在单击按钮时显示菜单，否则会切换。然而，我想做的几乎是相反的。我希望在单击按钮时切换，并且仅在单击文档的其他部分时隐藏。“hasClass（）”和“.not（[]）”似乎没有将下拉切换识别为正在被单击的对象的一个类。

调用

.toggle（）

内的

单击
处理程序链接到
$（“.dropdown toggle”）
；在
中，单击链接到
$（文档）
的处理程序
使用
.hasClass（）
或
.is（）
检查
事件.target
是否为
。下拉切换
，chain
.hide（）

谢谢活动部分是我需要的部分。
$(".dropdown-toggle").on("click", function() {
  $(this).toggle();
});

$(document).on("click", function(event) {
 if (!$(event.target).hasClass(".dropdown-toggle")) $(event.target).hide();
});