Question

var flip = 0;  
     $("#aabbcc").click(function () {  
         $("#navigation_menu_1").toggle( flip++ % 2 == 0 );  
});

<div id="aabbcc"></div> 
  <div id="navigation_menu_1">
<ul>
  <a href="#"><li>Navigation Item</li></a>
</ul> 

I’m using this small script for a “click menu”
What I am trying to accomplish is for the active menu which was called upon by one of the buttons to dispay:none if the mouse leaves the div area which was called upon by one of the buttons.

So basically I would click the menu button, a div appears, but if i click anywhere out of the div the menu will go back to displaying as none.

This seems simple but I have been at for hours.

Thanks in advance for any suggestions or advice.

Answer 1

One way to do this would be to register a click() on the document. If the event.target.id does not equal some constraint simply hide the navigation.

$(document).click(function(event) {
    var a = $(event.target).andSelf().parents("#navigation_menu_1");
    if (a.length == 0 && $("#navigation_menu_1").is(":visible")) {
        $("#navigation_menu_1").toggle();
    }
});

Code example on jsfiddle.

Also, the flip variable is not needed, you can just call .toggle() directly.