How to hide a jquery ui menu when clicked anywhere else?

Question

I am trying to implement a jquery-ui menu that appears when an object is clicked but disappears when a click is made anywhere other than on the menu itself.

This is the code I have so far:

$("div.item").click(function(e){
        $( "#menu" ).menu( );
        $("#menu").css("top",e.pageY);
        $("#menu").css("left",e.pageX);
        
       });

Now I want to hide and destroy the menu if a click is made anywhere other than on the menu itself.

Reputed

Answer 1

You want to use the blur event, which fires when an object loses focus. Clicking on something else will take the focus away.

$("#menu").blur(function () {
    // Your code here to either hide the menu (.toggle())
    // or remove it completely (.remove()).
});

Garris

cant get it to work, for some reason event is invoked only when I click an item in "#menu" the first time and click somewhere else on the screen. – Reputed

actually got it to work.. I just had to do $("#menu").focus(); when it was clicked because when the div was clicked and menu shows, the focus was not on the menu.. thanks for the explanation since it helped me figure it out :).. – Reputed

Answer 2

Just to tanks for above code and comment (@death-relic0, @levi-botelho)

// create
$('#menu').blur(function() {
    $('#menu').hide();
});

// show
$('#menu').show().focus();

Underbelly

Answer 3

I had the same issue with the JQuery UI selectmenu widget and the problem occurred because I didn't import the JQuery UI selectmenu css file. I chose not to because I wanted to style the select menu myself.

To fix the problem I added [aria-hidden="true"] { display: none; } to my own css, I noticed that this aria property was toggling between true and false when I playing around trying to fix the issue.

Cytherea

Answer 4

hi this is the process we follow in Oodles Technologies to hide jquery datepicker .

The basic structure of our modal will look like this.

<button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Open Modal</button>

And this is the our basic css and that’s for defined height modal.

.modal-body {
    min-height: 500px;
    max-height: 500px;
    overflow: auto;
}

$(".modal-body").scroll(function(){
    $("#ui-datepicker-div").hide();
});

Hope It Helps

Selenography

Answer 5

From @Levi Botelho Ans and @Ahmed-Anas comments I made it more reusable in the first creation of the widgets. Something like this:

const handleClickedOutside = function (e, ui) {
            var self = $(this);
            $("ui-selectmenu-menu").focus()
                .blur(function (event) {
                    self.selectmenu('close');
                });
        };

$("#first").selectmenu({
     change: ..,
     position: { .. },
     open: handleClickedOutside
});

$("#second").selectmenu({
     change: ..,
     position: { .. },
     open: handleClickedOutside
});

Jussive

Answer 6

There seems to be a problem with the blur event in version 1.9 of jQueryUI (incorrectly generated when taking focus of a menu item!)

My solution: (#jQueryMenu represents the first basile of my menu, #ShowMenu an image allowing me to call the menu.)

$("#jQueryMenu")
    .menu()
    .hide()
    .blur( function () {
        $(this).hide();
    });
    
$("#ShowMenu")
    .click( function (){
        $(".jQueryMenu").show().focus();
    });

Wileywilfong