Question

Ok i have this drop down menu script. It works fine when all the clicking takes place on the menu itself but when i click off of the menu the drop down does not close. I want the menus to close if the user clicks somewhere on the screen that is not the actual menu.

I have tried adding the code:

document.onclick = ddMenu_close;

But then this makes the menu never open because it is calling “open” through the function but then closing it right away because it then calls the onclick ddMenu_close. My script is below:

<script type="text/javascript">
  function ddMenu() {
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    function ddMenu_open(e)
    {
       ddMenu_close();
       var submenu = $(this).find('ul');
        if(submenu){
            ddmenuitem = submenu.css('visibility', 'visible');

        }

    }

    function ddMenu_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }

    function ddMenu_timer()
    { closetimer = window.setTimeout(ddMenu_close, timeout); }

    function ddMenu_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}

    $(document).ready(function()
    {  $('#ddMenu > li').bind('click', ddMenu_open);
       $('#ddMenu li ul').bind('click', ddMenu_timer);


    });


    }
    </script>

So i need to add something to this script that will close the drop down when the ducument or window is clicked but not interferer with the clicking on the menu or the drop down. Thank you for any help.

Answer 1

In ddMenu_open () for $(document) binding click event trigger ddMenu_close ().
In ddMenu_close () cancel $(document) of the click event.

this is the example:

http://jsfiddle.net/bEPvP/