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

我正在使用jQuery来显示和隐藏div，方法是向其中添加/删除类。添加并删除类使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/感谢帕特里克的资源！

来源

2010-06-26 CarterMan

我不明白这一点：当输入字段失去焦点时，你隐藏了一行......那么你如何能够再次选择输入字段？我错过了什么吗？ – 2010-06-26 22:40:42

链接有什么作用？点击这个链接*会去模糊，但是可能有一种方法可以欺骗它（可以这么说）。也许只是对实际情况有所了解。 – user113716 2010-06-27 00:19:28

@Marcel - '.row div {display：none; }'和'.row.linksdiv div {display：block; }'例如:) @Carter - 你不能用'blur'干净地做到这一点，因为它会隐藏孩子，并且点击锚点不会发生......是否有替代方案这里？ – 2010-06-27 01:30:27

@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-27 13:16:11 user113716

我应该更具体这是我正在尝试。 http://jsfiddle.net/Zw5c2/5/很难解释。您的第一个解决方案非常接近，但仍然存在模糊问题。 – CarterMan 2010-06-27 15:57:15

@CarterMan - 如果你只是想能够点击链接，那么你仍然需要延迟模糊。我更新了你的jsFiddle来添加一个'setTimeout'。现在你可以点击链接。 http://jsfiddle.net/Zw5c2/7但是，如果它将带你到另一个页面，我不明白你为什么需要隐藏'.row'。有不同的方法*取决于链接实际上应该做什么*。 – user113716 2010-06-27 17:20:40

该链接加载了常见问题页面或与要填写的输入相关的资源。隐藏类行是必需的，因此并非表单中的所有字段都同时高亮显示。假设链接将等于'target = _blank' – CarterMan 2010-06-27 19:00:39

我不会有一个模糊事件附加到输入。模糊发生的原因很多，而且可能是不希望的。

如果您的目标是简单地突出显示当前活动字段的输入行，那么我只需在焦点中添加逻辑即可确保一次只有一个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-26 22:39:54

我想我可以抓住漂移，但似乎没有预期的效果。这就是我所做的http://jsfiddle.net/Zw5c2/5/ – CarterMan 2010-06-27 15:56:40

也许你可以解释*期望的效果*。 – 2010-06-27 17:14:36

预期的效果将与我在示例中的效果完全相同，除非您可以在div消失之前单击该链接。 – CarterMan 2010-06-27 20:02:58

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

回答

相关问题