通过近距离添加输入中的密切图标内部输入

Question

我遇到了麻烦，试图解决一些问题，如果有人可以在以下方面借给我一只手：

：

演示：http：//jsfiddle.net/44zay/3/（更新：添加了多个然后感到困惑的多个，对此的任何帮助都很棒。还可以在单击图标时添加单击功能以关闭）p>单击输入时，它会扩展，当单击时，当我想添加的内容是：

时，这就是我想要的。

a）在输入扩展后，在输入中添加字体很棒的图标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/