Hide menu when user clicks outside of the button?

Question

I have tried many different solutions but none have worked. My way of doing this is a bit different from everyone else's and I think that's why theirs wont work for me.

I have this:

   function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';

   else
      e.style.display = 'block';

    }

I want to make the pulled down menu disappear not only when you click on the button again to close it, but also when you click anywhere else outside. Thank you in advance.

You tagged this as jQuery... where is the jQuery? Also can you provide HTML? — Dom, Apr 04 '13 at 21:24
Maybe [this one](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it?rq=1) helps you. — pzin, Apr 04 '13 at 21:24

score 1 · Accepted Answer · answered Apr 04 '13 at 21:20

1

Try this, i hope it will work for you:

         $('body').not($('#menu').find('*'))
         .bind('click',function(){
            $("#menu").css('top', '-1000px');
            $("#menu").css('left', '-1000px');
         });

Lets handle clicks on the body, and if the click happens NOT anywhere on the menu, do your hiding

answered Apr 04 '13 at 21:20

Zahid

38
4

I think I figured it out actually, thank you for your answer! – Bennett Apr 04 '13 at 23:50

Hide menu when user clicks outside of the button?

1 Answers1