Скрыть div при нажатии снаружи - PullRequest
Новая
       2

Скрыть div при нажатии снаружи

4 голосов
/ 23 июня 2011

Я искал и ищу не только в Google, но и здесь, и все еще должен найти решение, которое будет работать.

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

Это jquery: 

<script type="text/javascript">
    function toggleDiv(divID) {
    $("#"+divID).fadeToggle(200);
    }
</script>

И ссылка, которая его переключает: 

<a onclick="toggleDiv('myDiv');">Link</a>

А потом div: 

<div id="myDiv">
stuff
</div>

Если у кого-нибудь есть совет, я был бы очень признателен.

Ответы [ 3 ]

11 голосов
/ 23 июня 2011

Это должно помочь вам: 

var openDiv;

function toggleDiv(divID) {
    $("#" + divID).fadeToggle(200, function() {
        openDiv = $(this).is(':visible') ? divID : null;
    });
}

$(document).click(function(e) {
    if (!$(e.target).closest('#'+openDiv).length) {
        toggleDiv(openDiv);
    }
});

Пример & # x2192;

РЕДАКТИРОВАТЬ: Теперь работает для всех сценариев.

3 голосов
/ 23 июня 2011

Вы можете просто добавить обработчик кликов на body, так как клик в любом месте будет "пузыриться" до этого элемента. 

$("body").click(function(){ $("#myDiv").fadeOut(200); });

Возможно, вы также захотите добавить класс к переключаемым элементам в своем демонстрационном коде, чтобы вы могли нацеливать их более конкретно, когда хотите скрыть их. 

function toggleDiv(divID) {
    $("#"+divID).fadeToggle(200).toggleClass("visible");
}

$("body").click(function(){
    $(".visible").fadeOut(200, function(){
        $(this).removeClass("visible");
    });
});

Если вы не хотите, чтобы видимый div скрывался при нажатии, вам также нужно отменить щелчки на этих элементах, возможно, используя метод live() в jQuery. 

$(".visible").live("click", function(e){ e.stopPropagation(); });
0 голосов
/ 04 июля 2013 
$(document).mouseup(function(e) {
                var container = $("#form1");

                if (container.has(e.target).length === 0) {
                    container.hide();
                    $('#signupSection').css('display', 'none');
                    $('#signupSection2').css('display', 'block');
                }
            });
...