Question

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

输入应该在模糊后收缩，但只有在模板外部触发模糊时才会收缩。

现在我正在使用以下内容，即使我只是从搜索选项菜单中选择一个选项，它也会过早收缩搜索输入：

$(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之外，我怎么能告诉jQuery只收缩#search_form？

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/

jQuery动画模糊 - 但只有在窗体外模糊

1 个答案: