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.

score 10 · Accepted Answer · answered Dec 14 '12 at 07:50

10

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

answered Dec 14 '12 at 07:50

Levi Botelho

24,626
5
61
96

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. – Ahmed-Anas Dec 14 '12 at 08:02
6

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 :).. – Ahmed-Anas Dec 14 '12 at 08:07

score 1 · Answer 2 · answered Apr 27 '13 at 19:37

1

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

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

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

answered Apr 27 '13 at 19:37

iman

21,202
8
32
31

score 0 · Answer 3 · answered May 30 '15 at 22:39

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.

score 0 · Answer 4 · answered Oct 07 '16 at 12:56

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

score 0 · Answer 5 · answered Apr 07 '21 at 08:49

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

score 0 · Answer 6 · answered Sep 07 '21 at 13:02

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

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

6 Answers6