jQuery - Verstecken Sie ein div Menü nach außen div

Question

klicken habe ich ein Dropdown-Menü bauen auf:

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

Wenn Sie auf die Auf-/Ab-Pfeil neben dem Logo - das Menü angezeigt wird - Ich würde es gerne verschwinden lassen, wenn ich irgendwo anders auf den Bildschirm klicke - aus irgendeinem Grund bleibt es hängen und rutscht nicht wieder hoch.

Kann jemand helfen, dies zu lösen!

Hier ist mein Skript:

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

}); 

Dank !!!

Answer 1

diesen Schnipsel in Ihrem Code hinzufügen

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

dies schließt Ihre ul.subnav, wenn Sie irgendwo in Ihrem Dokument klicken.

Answer 2

Es ist ganz einfach: binden, um eine Funktion, die außer diesem Menü des Menü alles verbirgt. Um das zu tun binden Sie eine klicken Sie auf Listener an die body Element, wie es überall ist, auch binden Sie eine klicken Sie auf Listener Menü - die letzte sollte nur von der Ausführung der ersten zu verhindern.

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

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