Click outside menu to close in jquery

Question

So I have a drop-down menu that shows on a click, as per business requirements. The menu becomes hidden again after you mouse away from it.

But now I am being asked to have it stay in place until user clicks anywhere on the document. How can this be accomplished?

This is a simplified version of what I have now:

$(document).ready(function() {
  $("ul.opMenu li").click(function(){
   $('#MainOptSubMenu',this).css('visibility', 'visible');
  });

  $("ul.opMenu li").mouseleave(function(){
      $('#MainOptSubMenu',this).css('visibility', 'hidden');
  });
});



<ul  class="opMenu">
  <li id="footwo" class="">
    <span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>
      <ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">
        <li>some</li>
       <li>nav</li>
       <li>links</li>
       </ul>
    </li>
</ul>

I tried something like this $('document[id!=MainOptSubMenu]').click(function() thinking it would trigger on anything that wasnt the menu, but it didnt work.

I have an answer over here. > [http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/43405204#43405204](http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/43405204#43405204) — Dan Philip Bejoy, Apr 14 '17 at 04:29
Possible duplicate of [How do I detect a click outside an element?](http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Dan Philip Bejoy, Apr 14 '17 at 12:11

score 203 · Answer 1 · edited May 23 '17 at 12:10

203

Take a look at the approach this question used:

How do I detect a click outside an element?

Attach a click event to the document body which closes the window. Attach a separate click event to the window which stops propagation to the document body.

$('html').click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

edited May 23 '17 at 12:10

Community

1
1

answered May 19 '10 at 19:16

Jon W

15,480
6
37
47

17

its very beautyfull but you should use $('html').click() not body. The body always has the height of its content. It there is not a lot of content or the screen is very high, it only works on the part filled by the body. Copy from: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element – meo Feb 25 '11 at 15:35 – NickGreen Jan 20 '12 at 12:50
great solution. any idea why it works with .click() and not with .live('click', func...? – Hat Apr 18 '13 at 00:41
3

The only problem with this approach is that objects which already have a click listener which stopPropagation for other reasons have no effect. I understand why it is so, but it's still a limitation of this solution. – DanH May 14 '13 at 02:58

adriendenat · Answer 2 · 2015-07-28T14:59:55.040

The answer is right, but it will add a listener that will be triggered every time a click occurs on your page. To avoid that, you can add the listener for just one time :

$('a#menu-link').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();

    $('#menu').toggleClass('open');

    $(document).one('click', function closeMenu (e){
        if($('#menu').has(e.target).length === 0){
            $('#menu').removeClass('open');
        } else {
            $(document).one('click', closeMenu);
        }
    });
});

Edit: if you want to avoid the stopPropagation() on the initial button you can use this

var $menu = $('#menu');

$('a#menu-link').on('click', function(e) {
    e.preventDefault();

    if (!$menu.hasClass('active')) {
        $menu.addClass('active');

        $(document).one('click', function closeTooltip(e) {
            if ($menu.has(e.target).length === 0 && $('a#menu-link').has(e.target).length === 0) {
                $menu.removeClass('active');
            } else if ($menu.hasClass('active')) {
                $(document).one('click', closeTooltip);
            }
        });
    } else {
        $menu.removeClass('active');
    }
});

I see code like this a lot, wouldn't this add a new click function to the document every time the menu link is clicked? So if you click the menu link 1000 times without refreshing the page, you'll have 1000 functions taking up memory and also executing? — eselk, Apr 08 '13 at 22:10
Nevermind, I didn't see the "one" function, now I understand why this works: http://api.jquery.com/one/ — eselk, Apr 08 '13 at 22:15
nice solution but I had to use `e.stopPropagation()` in Chrome to stop the first event from firing in the `one()` handler — antfx, Jun 10 '15 at 19:45

score 26 · Answer 3 · edited Aug 03 '18 at 07:29

The stopPropagation options are bad because they can interfere with other event handlers including other menus that might have attached close handlers to the HTML element.

Here is a simple solution based on user2989143's answer:

$('html').click(function(event) {
    if ($(event.target).closest('#menu-container, #menu-activator').length === 0) {
        $('#menu-container').hide();
    }
});

score 17 · Answer 4 · answered May 19 '10 at 21:25

17

If using a plugin is ok in you case, then I suggest Ben Alman's clickoutside plugin located here:

its usage is as simple as this:

$('#menu').bind('clickoutside', function (event) {
    $(this).hide();
});

hope this helps.

answered May 19 '10 at 21:25

Subliminal Hash

13,614
20
73
104

score 9 · Answer 5 · answered May 19 '10 at 19:20

2 options that you can investigate:

On showing of the menu, place a large empty DIV behind it covering up the rest of the page and give that an on-click event to close the menu (and itself). This is akin to the methods used with lightboxes where clicking on the background closes the lightbox
On showing of the menu, attach a one-time click event handler on the body that closes the menu. You use jQuery's '.one()' for this.

score 6 · Answer 6 · edited May 23 '17 at 11:55

6

I found a variant of Grsmto's solution and Dennis' solution fixed my issue.

$(".MainNavContainer").click(function (event) {
    //event.preventDefault();  // Might cause problems depending on implementation
    event.stopPropagation();

    $(document).one('click', function (e) {
        if(!$(e.target).is('.MainNavContainer')) {
            // code to hide menus
        }
    });
});

edited May 23 '17 at 11:55

Community

1
1

answered Jul 24 '13 at 14:59

cat5dev

1,317
15
12

score 5 · Answer 7 · answered May 03 '13 at 23:38

5

what about this?

    $(this).mouseleave(function(){  
        var thisUI = $(this);
        $('html').click(function(){
                thisUI.hide();
            $('html').unbind('click');
         });
     });

answered May 03 '13 at 23:38

cgfix

51
1
1

score 5 · Answer 8 · answered Mar 07 '14 at 20:47

5

I use this solution with multiple elements with the same behavior in the same page:

$("html").click(function(event){
    var otarget = $(event.target);
    if (!otarget.parents('#id_of element').length && otarget.attr('id')!="id_of element" && !otarget.parents('#id_of_activator').length) {
        $('#id_of element').hide();
    }
});

stopPropagation() is a bad idea, this breaks standard behaviour of many things, including buttons and links.

answered Mar 07 '14 at 20:47

user2989143

61
1
1

This is great, but you can simplify it as `$target.closest('#menu-container, #menu-activator').length === 0` – Code Commander Jun 19 '14 at 19:43

score 5 · Answer 9 · answered May 27 '16 at 14:37

I have recently faced the same issue. I wrote the following code:

    $('html').click(function(e) {
      var a = e.target;
      if ($(a).parents('.menu_container').length === 0) {
        $('.ofSubLevelLinks').removeClass('active'); //hide menu item
        $('.menu_container li > img').hide(); //hide dropdown image, if any
     }
    });

It has worked for me perfectly.

score 4 · Answer 10 · edited Jun 19 '16 at 18:01

I find it more useful to use mousedown-event instead of click-event. The click-event doesn't work if the user clicks on other elements on the page with click-events. In combination with jQuery's one() method it looks like this:

$("ul.opMenu li").click(function(event){

   //event.stopPropagation(); not required any more
   $('#MainOptSubMenu').show();

   // add one mousedown event to html
   $('html').one('mousedown', function(){
       $('#MainOptSubMenu').hide();
   });
});

// mousedown must not be triggered inside menu
$("ul.opMenu li").bind('mousedown', function(evt){
    evt.stopPropagation();
});

Abhimaan · Answer 11 · 2016-08-29T08:33:29.283

even i came across the same situation and one of my mentor put this idea across to myself.

step:1 when clicked on the button on which we should show the drop down menu. then add the below class name "more_wrap_background" to the current active page like shown below

$('.ui-page-active').append("<div class='more_wrap_background' id='more-wrap-bg'> </div>");

step-2 then add a clicks for the div tag like

$(document).on('click', '#more-wrap-bg', hideDropDown);

where hideDropDown is the function to be called to hide drop down menu

Step-3 and important step while hiding the drop down menu is that remove that class you that added earlier like

$('#more-wrap-bg').remove();

I am removing by using its id in the above code

.more_wrap_background {
  top: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  display: block;
  width: 100% !important;
  z-index: 999;//should be one less than the drop down menu's z-index
  height: 100% !important;
}

Finsky · Answer 12 · 2023-02-17T09:59:20.100

3

You could use the :visible css selector to check for when it's not being hovered. Here's a working example :

<button id="menu-btn">
  Menu
</button>
<div id="menu-popup" style="display: none">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

$("#menu-btn").on('click', function() {
    $("#menu-popup").toggle();
});

$(document).on('click', function() {
    if (!$("#menu-btn:hover").length) {
    $("#menu-popup:not(:hover)").hide();
  }
});

JSFiddle : https://jsfiddle.net/8em0Lz1d/

edited Feb 17 '23 at 09:59

answered Jan 31 '19 at 16:17

Finsky

53
5

This prevents me from opening the menu – Green Dec 19 '22 at 16:16
1

@Green I updated my answer to include a complete example. – Finsky Feb 17 '23 at 09:59

score 2 · Answer 13 · answered Jan 14 '14 at 03:35

$("html").click( onOutsideClick );
onOutsideClick = function( e )
{
    var t = $( e.target );
    if ( !(
        t.is("#mymenu" ) ||     //Where #mymenu - is a div container of your menu
        t.parents( "#mymenu" ).length > 0
        )   )
    {
        //TODO: hide your menu
    }
};

And better to set the listener only when your menu is being visible and always remove the listener after menu becomes hidden.

score 1 · Answer 14 · answered Mar 09 '13 at 17:21

I think you need something like this: http://jsfiddle.net/BeenYoung/BXaqW/3/

$(document).ready(function() {
  $("ul.opMenu li").each(function(){
      $(this).click(function(){
            if($(this).hasClass('opened')==false){          
                $('.opMenu').find('.opened').removeClass('opened').find('ul').slideUp();
                $(this).addClass('opened'); 
                $(this).find("ul").slideDown();
            }else{
                $(this).removeClass('opened'); 
                $(this).find("ul").slideUp();               
            }
      });
  });    
});

I hope it useful for you!

score 1 · Answer 15 · answered Oct 22 '15 at 14:21

Use the ':visible' selector. Where .menuitem is the to-hide element(s) ...

$('body').click(function(){
  $('.menuitem:visible').hide('fast');
});

Or if you already have the .menuitem element(s) in a var ...

var menitems = $('.menuitem');
$('body').click(function(){
  menuitems.filter(':visible').hide('fast');
});

score 0 · Answer 16 · answered Aug 03 '21 at 16:46

If you are not using jQuery and wanted to do it with pure CSS and HTML this is the solution.

Create a trigger element and inside it write your popup element.
Attach a click handler to unhide the popup on the click of the trigger element.
Have a backdrop element that stretches to the entire screen width and attach click handlers to that which hides the popup.
All attached click handlers should stop the event from propagating so other handlers are not called.

Find live code below

function showPopup(bShow,args){
  var popupContainer = document.getElementsByClassName('popup-container')[0];
  debugger;
  if(!bShow){
    popupContainer.classList.add('hide-element')
  }else{
    popupContainer.classList.remove('hide-element')
  }
  args[0].stopPropagation();
}

.popup-trigger{
  cursor: pointer;
  margin: 10px;
  padding: 5px;
  width: fit-content;
  background: red;
  border-radius: 5px;
  position: relative;
}

.body{
  width: 100%;
  height: 1000px;
  background: yellow;
  padding: 10px;
}

.backdrop{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.actual-popup{
}
.popup-container{
 top: 30px;
 width: 100px;
 height: 50px;
 background: grey;
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
}

.hide-element{
  visibility: hidden;
}

<div class="body">

  <div onclick="showPopup(true,arguments)" class="popup-trigger">Click to open dialog with button
    <div onclick="showPopup(false,arguments)" class='popup-container hide-element'> 
     <div onclick="showPopup(false,arguments)" class='backdrop'>  </div>
     <div onclick="showPopup(true,arguments)" class='actual-popup'> 
        <button onclick="showPopup(false,arguments)"> close me </button>
     </div>
     
    </div>
   
  </div>
</div>

score 0 · Answer 17 · answered Oct 05 '21 at 14:14

Looks through these answers and this is how i ended up doing it

$('html').click(function(event) {

let openMenuButton = $("#menu-open");
let menu = $("#menu-popup");
let both = $('#menu-popup, #menu-open');

    if ( $(event.target).closest(both).length === 0 ) {  
        $(menu).hide();
        console.log("if statement");
        
    } else if ( $(menu).is(":visible") && $(event.target).closest(openMenuButton).length === 1 ){
    $(menu).hide();
    console.log("if ELSE statement");
    } else {
    $(menu).show();
    console.log("ELSE statement");
    }
   
});

Click outside menu to close in jquery

17 Answers17

Linked

Related