JavaScript-当单击特定按钮以外的内容时，如何运行函数？

Question

我有一个菜单，我想在单击按钮时显示/切换，而在单击按钮以外的文档的某些部分时隐藏。 我一直在尝试一些事情，如您在此处看到的：

// $('.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”），无论我单击文档的哪个部分，该按钮都将切换。

编辑：我解决了部分问题。 当我取消注释顶部（下拉式切换类的单击侦听器）时，菜单显示，然后立即切换，因此隐藏。 如果将“显示”更改为“隐藏”，则会使其显示，以便在单击按钮时显示菜单，否则进行切换。 但是，我想做相反的事情。 我想在单击按钮时进行切换，并且仅在单击文档的其他部分时才隐藏。 似乎“ hasClass（）”和“ .not（[]）”没有将下拉切换识别为正在单击的事物的一类。

Answer 1

在链接到$(".dropdown-toggle") click处理程序中调用.toggle() $(".dropdown-toggle") ； 内click处理程序链接到$(document)使用.hasClass()或.is()检查，如果event.target是.dropdown-toggle ，链.hide()

$(".dropdown-toggle").on("click", function() {
  $(this).toggle();
});

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