jQuery在模糊时设置动画-但仅当模糊超出形式时

jQuery animate on blur - but only if blur outside of form

本文关键字：模糊 设置 动画 jQuery      更新时间：2023-09-26

我有一个搜索输入（#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_form之外时，我如何告诉jQuery只收缩#search_input

您必须绑定到窗口的点击事件，否则您将无法检测到用户是否正在失去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/

相关文章：