Javascript 在具有关闭操作的输入中添加关闭图标

我在想办法解决问题时遇到了困难，如果有人能帮我解决以下问题，那就太好了：

演示：（更新：添加了多个会让人困惑的图标，任何关于这方面的帮助都会很好。还添加了单击图标时关闭的单击功能）

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

a） 扩展输入后，在输入中添加字体图标 b） 单击x图标将输入关闭回正常大小的功能，与当前从输入中单击时的操作相同

迄今为止的代码（基本示例）如下所示：

JS

HTML

当前输入是如何在我的开发中使用绝对位置的，因为它超出了其他输入

---

提前谢谢

您只需在

类中添加一个负边距即可。resize close

类：

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

…然后将模糊处理程序更新为单击处理程序：

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

---

难道

（b）

已经在工作了吗？我想你可以通过在按钮上设置一个负边距来实现

（a）

。这就是你要找的吗？x图标和“字体超级图标”一样吗？我更新了小提琴，如果可能的话，我需要输入中的图标。当我在那里有超过1个输入时，它也会变得混乱。更新-如果我可以在任何时候同时展开这两个输入就好了。@JamesBrandon如果你在选择

调整大小关闭

图标时使用jquery

下一步

，我想你会没事的，例如。如果您在另一个字段中签入blur if，则展开和模糊都会起作用-我做了一些更改-您知道如何使其允许一次打开多个输入吗？请删除

blur

事件处理程序，否则当您单击/tab进入另一个输入时，它将“关闭”输入。我知道，但我需要它关闭，如果你点击出输入或标签，以及它做了这与模糊，任何想法和感谢你的时间：）使用绑定是解决方案吗？如果你需要关闭一个点击或标签到另一个文本框，你怎么会有两个打开在同一时间？

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

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