JQuery - Скрыть меню Div после нажатия вне DIV

Question

Я построить выпадающее меню на:

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

При нажатии на стрелки вверх/вниз рядом с логотипом - появится меню - Я бы хотел, чтобы он исчез, щелкнув где-нибудь еще на экране - по какой-то причине он застревает и не скользит обратно.

Может кто-нибудь помочь разрешить это!

Вот мой сценарий:

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

}); 

Спасибо !!!

Answer 1

добавить этот фрагмент в коде

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

это закроет ваш ul.subnav при нажатии кнопки в любом месте документа.

Answer 2

Это довольно просто: привяжите функцию, которая скрывает это меню ко всему, кроме этого меню. Чтобы сделать это, привяжите , нажмите прослушиватель на элемент body, как и везде, также привяжите , нажав слушатель в меню - последний должен просто предотвратить выполнение первого.

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

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