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

Question

fiddle 在这里: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);; 
});

Answer 1

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

问题是，当您点击第二个输入时，第一个输入会触发“blur”事件。所以快速修复是检查是否有 event.relatedTarget != null。如果有 relatedTarget，则停止执行第一个输入的 'blur' 事件。

但我建议完全重构这段代码:)