jQuery - Hide a div menu after clicking outside div

Question

I\'ve build a drop down menu at:

http://www.ourbridalsongs.com/new_header/header.php

When you click on the up/down arrow next to the logo - the menu appears

Answer 1

It's quite simple: bind a function that hides that menu to everything except that menu. To do that bind a click listener to the body element as it's everywhere, also bind a click listener to menu - the last one should just prevent from executing the first one.

$("body").click(function() {
    $("#services-container-id").hide();
});

$("#services-container-id").click(function(e) {
    e.stopPropagation();
});

Answer 2

add this snippet in your code

$(document).click(function(e){
    var myTarget = $(".subnav");
    var clicked = e.target.className;
    if($.trim(myTarget) != '') {
        if($("." + myTarget) != clicked) {
            $("ul.subnav").slideUp('slow').hide();
        }
    }
});

this will close your ul.subnav when you click anywhere in your document.