javascript - 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 - I'd like to make it disappear when clicking anywhere else on the screen - for some reason it's getting stuck and doesn't slide back up.

Can anyone help resolve this!

Here's my script:

$(document).ready(function () {

    $("ul.subnav").parent().append("<span></span>");
    $("ul.topnav li span").click(function () {
        $(this).parent().find("ul.subnav").slideDown('slow').show();
        $(this).parent().click(function () {}, function () {
            $(this).parent().find("ul.subnav").slideUp('slow');
        });
    }).hover(function () {
        $(this).addClass("subhover");
    }, function () {
        $(this).removeClass("subhover");
    });

});

Thanks!!!

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();
});