Используйте jQuery, чтобы скрыть DIV, когда пользователь нажимает за его пределами - PullRequest
Новая
       64

Используйте jQuery, чтобы скрыть DIV, когда пользователь нажимает за его пределами

918 голосов
/ 10 сентября 2009

Я использую этот код: 

$('body').click(function() {
   $('.form_wrapper').hide();
});

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

И этот HTML: 

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

Проблема в том, что у меня есть ссылки внутри DIV и когда они больше не работают при нажатии.

Ответы [ 35 ]

0 голосов
/ 12 августа 2011

Согласно документации , .blur() работает больше, чем тег <input>. Например: 

$('.form_wrapper').blur(function(){
   $(this).hide();
});
0 голосов
/ 24 августа 2011

Что вы можете сделать, это привязать событие щелчка к документу, который будет скрывать раскрывающийся список, если щелкнет что-то за пределами раскрывающегося списка, но не будет скрывать его, если щелкнуть что-то внутри раскрывающегося списка, поэтому ваше событие «показать» (или скольжение или что-то показывает раскрывающийся список) 

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

Затем, скрывая его, отсоедините событие клика 

$(document).unbind('click');
0 голосов
/ 09 ноября 2011 
$(document).ready(function() {

$('.headings').click(function () {$('#sub1').css("display",""); });
$('.headings').click(function () {return false;});
$('#sub1').click(function () {return false;});
$('body').click(function () {$('#sub1').css("display","none");

})});
0 голосов
/ 13 сентября 2012

Я думаю, что это может быть намного проще. Я сделал это так: 

$(':not(.form_wrapper)').click(function() {
    $('.form_wrapper').hide();
});
0 голосов
/ 25 июля 2015

Переключатель для штатных и сенсорных устройств

Я прочитал некоторые ответы здесь некоторое время назад и создал некоторый код, который я использую для div, которые функционируют как всплывающие пузыри. 

$('#openPopupBubble').click(function(){
    $('#popupBubble').toggle();

    if($('#popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$('#popupBubble').find('*').is(e.target)){
                $('#popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

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

$('body').on('click', '.openPopupBubble', function(){
    $(this).next('.popupBubble').toggle();

    if($(this).next('.popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($(this).is(e.target) || $(this).find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$(this).next('.popupBubble').find('*').is(e.target)){
                $(this).next('.popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});
Страница:
...