Question

我试图解决问题时会遇到麻烦，如果有人可以帮我解决问题，那就太棒了：

演示：http://jsfiddle.net/44zAy/3/（更新：添加多个然后混淆，对此的任何帮助都会很棒。还添加点击功能，点击图标时关闭）

当你点击输入内部时，它会延伸，当点击时恢复正常，这就是我想要的但是我想要添加的是：

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/

通过关闭操作在输入内添加关闭图标

1 个答案: