Скрыть элемент, используя JQuery

Question

У меня есть div, #blue. Когда вы нажмете на #blue, появится еще один div, #green. Как я могу сделать так, что если вы нажмете какой-либо другой, кроме #blue, #green будет скрыт.

JSFIDDLE: http://jsfiddle.net/8Q2nN/

Мой JQuery:

$(document).ready(function() { 
    $("#blue").click(function() { 
     $("#green").show(); 
    }); 
}); 

Answer 1

Вы можете связать события нажатия на body и скрыть DIV с идентификатором green, если источник событий не элемент с идентификатором blue. Вы можете получить источник события щелчка через объект события, используя event.target и использовать его идентификатор, чтобы определить, является ли источник элемента с идентификатором blue

Live Demo

$('body').click(function(event){ 
    if(event.target.id != 'blue') 
     $("#green").hide(); 
}); 

Answer 2

http://jsfiddle.net/8Q2nN/1/

Easy, скрыть его, когда вы щелкаете за пределами синего. Использует .stopPropagation(), чтобы остановить клики на синем от пузырьков до документа.

$("#blue").click(function(e) { 
    e.stopPropagation(); 
    $("#green").show(); 
}); 
$(document).click(function() { 
    $("#green").hide(); 
}); 

Answer 3

Это может быть сделано путем простого добавления:

$('body').click(function(event){ 
     if(event.target.id != 'blue') 
     $("#green").hide(); 
}); 

После кода:

$(document).ready(function() { 
    $("#blue").click(function() { 
     $("#green").show(); 
    }); 
}); 

Этот код делает это так, что каждый раз, когда вы нажимаете на область, которая не синий div, он скроет зеленый цвет. Вы также можете вводить параметры в функции hide(), чтобы изменить их скрытность, например «медленный» или «быстрый»

Live demo с медленным параметром в функции.

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