使用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

如果事件来源不是ID为body的元素，您可以在green上绑定点击事件并隐藏ID为blue的div。您可以使用event.target通过事件对象获取点击事件的来源，并使用它来确定来源是否为ID为blue的元素

<强> Live Demo

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

Answer 2

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

很简单，当你点击蓝色外面时隐藏它。使用.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（）函数中输入参数以更改它隐藏的方式，例如“slow”或“fast”

Live demo使用函数中的慢参数。

您可以摆弄参数，以便在不点击它时使其成为您想要的样子。如果您希望它只是消失，只需将.hide（）函数留空在括号（）中。