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                  lt ul  class  opMenu  gt     lt li id  footwo  class    gt       lt span id  optImg  style  display  inline-block   gt   lt img src  http   localhost vmsinfo com 8002 insight images options-hover2 gif   gt   lt  span gt         lt 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   gt           lt li gt some lt  li gt          lt li gt nav lt  li gt          lt li gt links lt  li gt          lt  ul gt       lt  li gt   lt  ul gt     I tried something like this    document id  MainOptSubMenu    click function   thinking it would trigger on anything that wasnt the menu  but it didnt work

User · Answer

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

User · Answer

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  gt  img   hide      hide dropdown image  if any                  It has worked for me perfectly

User · Answer

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

User · Answer

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

User · Answer

It doesn t have to be complicated     document  on  click   function             menu not  hover    hide

User · Answer

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   lt div class  more wrap background  id  more-wrap-bg  gt   lt  div gt       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

User · Answer

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  amp  amp  otarget attr  id     id of element   amp  amp   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

User · Answer

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  gt  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

User · Answer

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

User · Answer

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  amp  amp     a menu-link   has e target  length     0                     menu removeClass  active                  else if   menu hasClass  active                        document  one  click   closeTooltip                                   else            menu removeClass  active

User · Answer

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

User · Answer

what about this         this  mouseleave function              var thisUI     this              html   click function                    thisUI hide                   html   unbind  click

User · Answer

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

User · Answer

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

User · Answer

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

[jquery] Click outside menu to close in jquery

Examples related to jquery