How do I close menu on click and when the user clicks away?

Question

I have the following code:

(function ($) {
    $(document).ready(function () {
        $(".clicker_class").click(function () {
            $('.show_menu_users').show();
        });
    });
})(jQuery);

$('.clicker_class').click(function (e) {
    e.stopPropagation();
});

I am new to JQuery and a bit puzzled. I was easily able to use the show function but I need to use the close or hide function to close the menu when the user clicks on .clicker_class again and when the user clicks away at something else. I tried using the e.stopPropogation(); but didn't work. How do I do that given my above code?

Update:

I got it to close if a user clicks elsewhere using this:

$(document).mouseup(function (e)
{
    var container = $(".clicker_class");

    if (container.has(e.target).length === 0)
    {
         $(".show_menu_users").hide();
    }
});

Question:

Now I just need the menu to close when the user clicks on .clicker_class. How can i do that now?

Answer 1

UPDATED to close menu if clicked outside of clicker_class elements.

You can track the state of the show_menu_users using a boolean. When you click on the clicker_class elements, toggle the menu and update the boolean. When you click elsewhere in teh document, close the menu.

(function ($) {
    $(document).ready(function () {
        var isShowing = false;

        var toggleMenu = function() {
            isShowing = !isShowing; //change boolean to reflect state change
            $('.show_menu_users').toggle(isShowing); //show or hide element
        }

        $(document).on('click', function (e) {
            if($(e.target).is('.clicker_class') || $(".clicker_class").has(e.target).length !== 0) {
                toggleMenu();
            } else {
                isShowing = false;
                $('.show_menu_users').hide();  
            }
        });
    });
})(jQuery);

Working example here.