jquery drop down menu closing by clicking outside

Question

I am developing a simple dropdown menu with jquery   When a user press on a trigger area   it will toggle the dropdown area  My question is how to have a click event outside of the dropdown menu so that it close the dropdown menu

User · Answer

how to have a click event outside of the dropdown menu so that it close the dropdown menu   Heres the code    document  click function  e        e stopPropagation        var container       dropDown           check if the clicked area is dropDown or not     if  container has e target  length     0                subMenu   hide

User · Answer

You would need to attach your click event to some element  If there are lots of other elements on the page you would not want to attach a click event to all of them    One potential way would be to create a transparent div below your dropdown menu but above all other elements on the page  You would show it when the drop down was shown  Have the element have a click hander that hides the drop down and the transparent div    x000D   x000D      clickCatcher   click function       x000D        dropContainer   hide    x000D      this  hide    x000D      x000D   dropContainer   z-index  101        x000D   clickCatcher   position  absolute  top  0  left  0  width  100   height  100   z-index  100    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  dropDown  gt  lt  div gt  x000D   lt div id  clickCatcher  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can tell any click that bubbles all the way up the DOM to hide the dropdown  and any click that makes it to the parent of the dropdown to stop bubbling      Anything that gets to the document    will hide the dropdown      document  click function          dropdown   hide            Clicks within the dropdown won t make    it past the dropdown itself        dropdown   click function e     e stopPropagation          Demo  http   jsbin com umubad 2 edit

User · Answer

Stopping Event Propagation in some particular elements ma y become dangerous as it may prevent other some scripts from running  So check whether the triggering is from the excluded area from inside the function     document  on  click   function event      if     event target  closest   menucontainer   length           Hide the menus            Here function is initiated when clicking on document  but it excludes triggering from  menucontainer  For details https   css-tricks com dangers-stopping-event-propagation

User · Answer

Another multiple dropdown example that works  https   jsfiddle net vgjddv6u    x000D   x000D      moderate  button   on  click    event    gt    x000D      event target  siblings   dropdown   x000D       toggleClass  is-open    x000D      x000D   x000D    document  click function e    x000D        moderate   x000D       not     moderate   has   e target    x000D       children   dropdown   x000D       removeClass  is-open    x000D      x000D   lt link href  https   cdnjs cloudflare com ajax libs bulma 0 4 0 css bulma css  rel  stylesheet    gt  x000D   x000D   lt script x000D    src  https   code jquery com jquery-3 2 1 min js  x000D    integrity  sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4   x000D    crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt style gt  x000D   dropdown   x000D    box-shadow  0 0 2px  777  x000D    display  none  x000D    left  0  x000D    position  absolute  x000D    padding  2px  x000D    z-index  10  x000D    x000D   x000D   dropdown a   x000D    font-size  12px  x000D    padding  4px  x000D    x000D   x000D   dropdown is-open   x000D    display  block  x000D    x000D   lt  style gt  x000D   x000D   x000D   lt div class  control moderate  gt  x000D     lt button class  button is-small  type  button  gt  x000D          moderate x000D         lt  button gt  x000D   x000D     lt div class  box dropdown  gt  x000D       lt ul gt  x000D         lt li gt  lt a class  nav-item  gt edit lt  a gt  lt  li gt  x000D         lt li gt  lt a class  nav-item  gt delete lt  a gt  lt  li gt  x000D         lt li gt  lt a class  nav-item  gt block user lt  a gt     lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   lt div class  control moderate  gt  x000D     lt button class  button is-small  type  button  gt  x000D          moderate x000D         lt  button gt  x000D   x000D     lt div class  box dropdown  gt  x000D       lt ul gt  x000D         lt li gt  lt a class  nav-item  gt edit lt  a gt  lt  li gt  x000D         lt li gt  lt a class  nav-item  gt delete lt  a gt  lt  li gt  x000D         lt li gt  lt a class  nav-item  gt block user lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Selected answer works for one drop down menu only  For multiple solution would be      body   click function event       dropdowns not  dropdowns has event target   hide

[javascript] jquery drop down menu closing by clicking outside

Examples related to javascript

Examples related to jquery

Examples related to drop-down-menu