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

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

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

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

Answer 2

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

$(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 при нажатии в любом месте вашего документа.