jQuery动画在模糊-但只有当模糊以外的形式

Question

我有一个搜索输入(#search_input)，它在被聚焦时扩展。弹出其他搜索选项，允许我选择特定的搜索选项。

输入应该在模糊之后收缩，但只有当模糊在表单之外触发时才会收缩。

http://jsfiddle.net/zMp9S/

现在，我使用以下方法，即使我只是在从搜索选项菜单中选择一个选项时，也过早地收缩了搜索输入：

$(function() {
    $("#search_input").focus(function(){
        $("#search_input").stop().animate({width: 310}, 200);
        $("#search_options").show();
    })
    $("#search_input").blur(function(){
        $("#search_input").stop().animate({width: 100}, 200);
        $("#search_options").hide();
    })        
});​

将焦点/模糊事件放在表单上不起作用。

当模糊发生在表单#search_input #search_form 之外时，如何告诉jQuery只与签约

Answer 1

您必须绑定到窗口的click事件，否则您将无法检测用户是否丢失了div的焦点(实际上没有焦点/模糊事件！)

  $(window).click(function(e) {
        if (e.target.id != 'search_options' && e.target.parentNode.id != 'search_options' && e.target.id != 'search_input') {
            $("#search_input").stop().animate({
                width: 100
            }, 200);
            $("#search_options").hide();
        }
    });

http://jsfiddle.net/zMp9S/9/