Question

As you guys can see, I have a drop down menu.

I have a lot of columns, each one has an option to open the menu.

$(".optionCont").live("click", function(){
    $(".dropMenuCont").slideUp();
    if ($(this).next().css("display") == "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

So, how can I do the menu slideUp when I click in any place of the page?

Like a document click?

I visited others topics, but I don’t know why, this is not working. Maybe I’m doing it in a diferent way.

I accept any tips in the menu coding.

Demo: Jsfiddle

Answer 1

Register a one-off handler inside the callback to make sure the next click closes the menu:

$(".optionCont").live("click", function(ev){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    ev.stopPropagation();

    $(document).one('click', function() {
             $(".dropMenuCont").slideUp();

    });
});

See http://jsfiddle.net/alnitak/GcxMs/