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

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

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

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

改变实现可能会更好。