javascript - 具有相同类的每个输入的jQuery Focus/Blur-存在问题

小提琴在这里：http://jsfiddle.net/44zAy/11/

一切都按我想要的方式工作，但是，如果您在第一个输入内单击，然后在第二个输入内单击，则第一个将关闭；如果您单击x按钮，则第一个将关闭。

我需要的是即使我在另一个内部单击也要保持打开状态，并且只有在我模糊不清的情况下才关闭它，而不要专注于另一个输入。那可能吗？

谢谢

码：

var inputWdith = '185px';
var inputWdithReturn = '68px';

jQuery('.resize-close').hide();

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

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

最佳答案

要快速修复当前代码，请使用event.relatedTarget：http://jsfiddle.net/QKVL9/

问题是，当您单击第二个输入时，将为第一个输入触发“模糊”事件。因此，快速的解决方法是检查是否有event.relatedTarget != null。如果存在relatedTarget，则停止对第一个输入执行'blur'事件。

但我建议对此代码进行完整的重构：）

关于javascript - 具有相同类的每个输入的jQuery Focus/Blur-存在问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21268226/