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

Question

I have a menu which I want to show/toggle when a button is clicked and hide when some part of the document besides the button is clicked. I've been trying a couple things, as you can see here:

// $('.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 I uncomment the top part, for some reason the menu will toggle when a part of the document besides the button is clicked and won't do anything when the button is clicked. If I keep that part commented and uncomment the first if statement (even if I replace the 'toggle' with 'show'), the button will toggle no matter what part of the document I click.

Edit: I solved part of the problem. It looks like when I uncomment the top part (the click listener for the dropdown-toggle class), the menu shows and then immediately toggles, so it hides. If I change 'show' to 'hide' I make it so that the menu shows when the button is clicked and toggles otherwise. However, I want to do almost the opposite. I want to toggle when the button is clicked and only hide when some other part of the document is clicked. It seems the "hasClass()" and ".not([])" aren't recognizing the dropdown-toggle as being a class of the thing that's being clicked.

Answer 1

Call .toggle() within click handler chained to $(".dropdown-toggle") ; within click handler chained to $(document) use .hasClass() or .is() to check if event.target is .dropdown-toggle , chain .hide()

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

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