1

当用户点击我的<input>所以会显示一些<div>

然后用户点击了另一个元素 agian like<body>或另一个 div 所以隐藏它

$("input").click(function(){
    $("div").fadeIn();
}).not(this).click(function(e){
    $("div").fadeOut();
});

游乐场：http: //jsfiddle.net/Zf34Q/

我的代码同时执行fadeIn()& fadeOut():(

4

3 回答 3

6

查询

$("input").focus(function(){
    $("div").fadeIn();
}).blur(function(e){
    $("div").fadeOut();
});​

小提琴 - http://jsfiddle.net/Zf34Q/1/

编辑

否决选民，对不起，我没有正确阅读问题，现在更新我的答案

于 2012-11-12T14:18:24.600 回答
3

你可以这样做 ：

$("input").click(function(){
    $("div").fadeIn();
    return false;
});
$(document).click(function(){
    $("div").fadeOut();
});

示范

第一个回调返回 false 以避免事件传播到文档（这将启动淡出）。从文档中：

从处理程序返回 false 等效于在事件对象上调用 .preventDefault() 和 .stopPropagation() 。

编辑：在 OP 的精确情况下，由于元素是输入，最好使用 atif089 的解决方案和模糊功能。我希望我的回答至少有助于阐明如何处理事件传播。

于 2012-11-12T14:15:53.420 回答
1

只是为了补充@atif089 的答案，并解释原始代码有什么问题：

this创建选择器时的不是，input而是其他一些对象（可能是window）。如果您想让您的click处理程序在任何其他元素上触发，则必须将其绑定到页面上的每个其他元素，或者在某个公共父元素上使用委托事件。

@atif089 的答案有一个更务实的解决方案，通过利用焦点的变化。

一个关于如何使用它的例子：http ":not": //jsfiddle.net/Zf34Q/2/

于 2012-11-12T14:28:58.653 回答