I believe you just have a typo:

`$("custom-menu")` in `closeContextMenu` should have a ID identifier:



    $("#custom-menu").hide();

Also, unless `isContextMenuOpen` is declared globally, it will remain scoped to `openContextMenu`, so the `hide` method will never execute.  You don't need it anyway as `hide` will work whether the element is visible or not.

Try this instead:



    function closeContextMenu(event) {
        $("#custom-menu").hide();
        console.log("Hide the context menu");
    }

Also, just to plug my own answer, for some pretty sophisticated context menu handling, look at this:

### [Use Bootstrap 3 dropdown menu as context menu](https://stackoverflow.com/a/18667336/1366033)

I'm displaying a contextmenu in jQuery, but am unable to close it.

These are the events that I am registering:


    
    function openContextMenu(event) {
        event.preventDefault();
        $("#custom-menu")
            .css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        })
            .show(100);
        isContextMenuOpen = true;
    }
    
    function closeContextMenu(event) {
        console.log("Click called on document");
        if (isContextMenuOpen) {
            $("custom-menu").hide();
            console.log("Hide the context menu");
        }
    
        isContextMenuOpen = false;
    }
    
    function registerMenu() {
    
        $(document).on({
            contextmenu: function (event) {
                openContextMenu(event);
            },
            click: function (event) {
                closeContextMenu(event);
            }
        });
    }