How To Properly Handle A 'body' Jquery Event To Close A Dropdown

I'm trying to make a dropdown very similar to dropbox dashboard, where if you click the username a flyout menu appears. Clicking the username again will close the flyout (toggling

Solution 1:

To be honest - when I am doing something like this and I do not want clicks inside of the "box" to close the element - I prevent clicks from bubbling.

// FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$('.flyout').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
});

$(document).on('click',function(e) { 
  if(flyout-open) {
        $flyout.fadeOut(flyoutDuration); 
    }
}); 

Solution 2:

Jquery Menu Click - on click anywhere on body will close the menu

In my case i wanted to close a drop down menu if its clicked primary link or outside the link i.e. anywhere on the html/body

http://jsfiddle.net/austinnoronha/k2Lwj/

var toggleClick = function(){

    var divObj = $(this).next();
    var nstyle = divObj.css("display");

    if(nstyle == "none"){
        divObj.slideDown(false,function(){
            $("html").bind("click",function(){
                divObj.slideUp();
                $("html").unbind("click");
            });
        });
    }
};

$(".clickme").click(toggleClick);