javascript - 使用关闭操作在输入中添加关闭图标

Question

我在尝试解决问题时遇到了麻烦，如果有人可以帮助我解决以下问题，那就太好了:

演示:http://jsfiddle.net/44zAy/3/ (更新:添加了多个然后变得困惑，任何帮助都会很好。还添加了单击功能以在单击图标时关闭)

当您在输入内部单击时，它会扩展，当单击退出时恢复正常，这正是我想要的，但我要添加的是:

a) 扩展后在输入中添加 Font Awesome 图标 b) 单击 x 图标将输入关闭回到正常大小的能力，与当前单击退出输入时的操作相同

到目前为止的代码(基本示例)如下:

JS

var inputWdith = '200px';
var inputWdithReturn = '68px';     
jQuery('.resize-close').hide();

jQuery('.resize-input').focus(function(){
 jQuery(this).animate({
  width: inputWdith
 },400);
 jQuery('.resize-close').show();
}); 
jQuery('.resize-input').blur(function(){  
 jQuery(this).animate({
  width: inputWdithReturn
 },500);
 jQuery('.resize-close').hide();    
});

HTML

<input type="text" class="resize-input">
<a class="resize-close"><i class="icon-remove"></i></a>

当前输入如何在我的开发中使用绝对位置，因为它扩展到其他输入上

提前致谢!

Answer 1

您可以简单地向 .resize-close 类添加负边距:

.resize-close {
    margin-left: -24px
}

...然后将模糊处理程序更新为点击处理程序:

jQuery('.resize-close').click(function(){  
    jQuery('.resize-input').animate({
        width: inputWdithReturn
    },500);
    jQuery('.resize-close').hide();    
});

http://jsfiddle.net/44zAy/5/