jQuery - Ocultar un menú div después de hacer clic fuera div

Question

he construir un menú desplegable en:

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

Al hacer clic en la flecha arriba/abajo al lado del logo - aparece el menú - Me gustaría que desaparezca al hacer clic en cualquier otro lugar de la pantalla, por alguna razón se está atascando y no se desliza hacia arriba.

¿Alguien puede ayudar a resolver esto!

Aquí está mi 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"); 
    }); 

}); 

Gracias !!!

Answer 1

añadir este fragmento de código en su

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

esto cerrará la ul.subnav al hacer clic en cualquier lugar del documento.

Answer 2

Es bastante simple: vincula una función que oculta ese menú a todo excepto a ese menú. Para hacer esto, añada al oyente al elemento body, ya que está en todas partes, también enlazar un oyente al menú; el último debería impedir que se ejecute el primero.

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

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