添加並刪除類使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顯示和隱藏

回答

相關問題