Вопросы Теги

jQuery - Hide a div menu after clicking outside div

I've build a drop down menu at:

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

When you click on the up/down arrow next to the logo - the menu appears - I'd like to make it disappear when clicking anywhere else on the screen - for some reason it's getting stuck and doesn't slide back up.

Can anyone help resolve this!

Here's my script:

$(document).ready(function () {

    $("ul.subnav").parent().append("");
    $("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");
    });

});

Thanks!!!

9
задан Reigel 23 August 2010 в 01:09
поделиться

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 , когда вы щелкнете в любом месте документа.

6
ответ дан 4 December 2019 в 06:49
поделиться

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

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

$("#services-container-id").click(function(e) {
    e.stopPropagation();
});
28
ответ дан 4 December 2019 в 06:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: