Question

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

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

在关注输入时效果很好，但如果我点击linksdiv中的链接，它会失去焦点并且div会消失。对linksdiv使用show（）和hide（）比依赖css更好吗？

当输入被聚焦时，是否允许div可点击？或者是否有一个简单的工作来保持linksdiv在点击时不会失去焦点，但仍然会在模糊时消失？

提前再次感谢！你真是太棒了！

对不起，我无法很好地描述我想要做的事情是http://jsfiddle.net/Zw5c2/5/感谢Patrick的资源！

Answer 1

我不会在输入中附加模糊事件。模糊发生的原因很多，而且可能是不受欢迎的。

如果您的目标只是突出显示当前活动字段的输入行，那么我只需在焦点中添加逻辑，以确保一次只有一个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");
  }
});

Answer 2

@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/

两种解决方案都不完美。

改变实施可能会更好。

添加和删除类以使div显示和隐藏

2 个答案:

添加和删​​除类以使div显示和隐藏

2 个答案:

添加和删除类以使div显示和隐藏