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();
});