jquery - 使用 JQuery 隐藏元素

Question

我有一个 div，#blue。当您单击#blue 时，会显示另一个 div，#green。我怎样才能做到这一点，如果您单击#blue 以外的任何位置，#green 将被隐藏。

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

我的查询：

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

Answer 1

如果事件源不是带有 id 的元素，您可以绑定点击事件body并隐藏带有 id 的 div 。您可以通过事件对象获取点击事件的来源，并使用它的id来确定来源是否是带有id的元素greenblueevent.targetblue

现场演示

$('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 参数的现场演示。

您可以摆弄参数以使其在不单击时成为您想要的样子。如果您希望它简单地消失，只需将括号 () 中的 .hide() 函数留空即可。