0

我有一个搜索输入 ( #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();
    })        
});​

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

我如何告诉 jQuery 仅#search_input在表单外发生模糊时收缩#search_form？

4

1 回答 1

1

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

于 2012-08-02T13:23:18.650 回答