JQuery скрыть элемент при нажатии в любом месте на странице - PullRequest
Новая
       69

JQuery скрыть элемент при нажатии в любом месте на странице

114 голосов
/ 03 апреля 2009

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

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

Элемент (div, span и т. Д.) Не должен исчезать при возникновении события click в границах элемента.

Ответы [ 18 ]

2 голосов
/ 03 февраля 2015 
$('html').click(function() {
//Hide the menus if it is visible
});

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

но вы должны иметь в виду и эти вещи. http://css -tricks.com / опасность остановки-событий распространения /

2 голосов
/ 11 августа 2013

Попробуй, он отлично работает для меня. 

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

    if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
        && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
    {
        searchcontainer.hide();
    }
});
2 голосов
/ 28 июля 2015

Вот рабочее решение CSS / small JS, основанное на ответе Sandeep Pal: 

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

Попробуйте, установив флажок, а затем за пределы меню:

https://jsfiddle.net/qo90txr8/

1 голос
/ 15 октября 2017 

$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>

<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>
1 голос
/ 13 февраля 2012

Всего 2 небольших улучшения вышеупомянутых предложений:

  • отменить привязку документа. Нажмите, когда закончите

  • остановить распространение на событие, которое вызвало это, при условии, что это щелчок 

    jQuery(thelink).click(function(e){
    jQuery(thepop).show();

    // bind the hide controls
    var jpop=jQuery(thepop);
    jQuery(document).bind("click.hidethepop", function() {
            jpop.hide();
            // unbind the hide controls
            jQuery(document).unbind("click.hidethepop");
    });
    // dont close thepop when you click on thepop
    jQuery(thepop).click(function(e) {
        e.stopPropagation();
    });
    // and dont close thepop now 
    e.stopPropagation();
});
1 голос
/ 03 апреля 2009

Это не работает - он скрывает .myDIV, когда вы щелкаете внутри него. 

$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

$(document).click(function(){  
$('.myDiv').hide(); 

});

});

<a class="openDiv">DISPLAY DIV</a>

<div class="myDiv">HIDE DIV</div>
0 голосов
/ 16 апреля 2019 
$( "element" ).focusout(function() {
    //your code on element
})
0 голосов
/ 13 января 2017 
$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});
Страница:
...