jQuery - Masquer un menu div après avoir cliqué sur l'extérieur div

Question

J'ai construire un menu déroulant à:

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

Lorsque vous cliquez sur la flèche haut/bas à côté du logo - le menu apparaît - Je voudrais le faire disparaître en cliquant n'importe où sur l'écran - pour une raison quelconque, il se coince et ne remonte pas.

Quelqu'un peut-il aider à résoudre ce problème!

Voici mon 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"); 
    }); 

}); 

Merci !!!

Answer 1

ajouter cet extrait dans votre code

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

cela fermer votre ul.subnav lorsque vous cliquez dans votre document.

Answer 2

C'est assez simple: lier une fonction qui masque ce menu à tout sauf ce menu. Pour faire cela lier un écouteur à l'élément body comme il est partout, également lier un cliquez sur écouteur au menu - le dernier devrait juste empêcher d'exécuter le premier.

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

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