0

我正在使用 jQuery 通过添加/删除一个类来显示和隐藏一个 div。

$('input').focus(function(){
    $(this).parents('.row').addClass("linksdiv");
}).blur(function(){
    $(this).parents('.row').removeClass("linksdiv");
});

它在专注于输入时效果很好，但是如果我单击其中的链接，linksdiv它会失去焦点并且 div 会消失。使用 show() 和 hide() 会linksdiv比依赖 css 更好吗？

当输入集中时，这是否允许 div 可点击？或者是否有一种简单的解决方法可以防止 linksdiv 在单击时失去焦点但仍然让它在模糊时消失？

再次提前感谢！你们太棒了！

很抱歉，我无法很好地描述我想要做的事情是http://jsfiddle.net/Zw5c2/5/ 感谢帕特里克提供的资源！

4

2 回答 2

0

我不会将模糊事件附加到输入。出现模糊的原因有很多，而且可能是不受欢迎的。

如果您的目标是简单地突出显示当前活动字段的输入行，那么我只需在焦点内添加逻辑，以确保一次div.row只能有一个linksdiv类。在你的情况下：

$('input').focus(function() {
  var containing_div = $(this).parents('.row');
  var current_div = $('div.row.linksdiv');

  if (current_div && current_div != containing_div) {
    current_div.removeClass("linksdiv");
  }
  else {
    containing_div.addClass("linksdiv");
  }
});
于 2010-06-26T22:39:54.480 回答
0

@Nick是对的，不会有一个干净的解决方案。

一种可能性是延迟模糊中的代码，以便链接的点击处理程序有机会将焦点发送回输入。

http://jsfiddle.net/Zw5c2/

var lastInput;
var timeout;
$('input').focus(function() {
    var $th = $(this);
    lastInput = $th;
    clearTimeout(timeout);
    $th.parents('.row').addClass("linksdiv");
}).blur(function() {
    var $th = $(this);
    timeout = setTimeout(function() {
        lastInput = null;
        $th.parents('.row').removeClass("linksdiv");
    }, 150);
});

$('.link').click(function() {
    lastInput.focus();
    // run your code for the link
});

另一种解决方案可能是使链接实际上是一个输入。只需对其进行样式设置以使其看起来像一个链接，并防止对文本进行任何更改。

http://jsfiddle.net/Zw5c2/1/

两种解决方案都不是完美的。

改变实施可能会更好。

于 2010-06-27T13:16:11.620 回答