Добавить и удалить класс, чтобы make div отображался и скрывался

Question

Я использую 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/ Спасибо Патрику за ресурс!

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/

Ни одно из решений является совершенным.

Изменения в реализации могут быть лучше.

Answer 2

У меня не было бы размытия, связанного с входами. Размытие происходит по многим причинам и может быть нежелательным.

Если ваша цель состоит в том, чтобы просто выделить строку ввода для текущего активного поля, тогда я бы просто добавил логику в фокус, которая гарантирует, что только один 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"); 
    } 
});