Добавьте и удалите класс, чтобы div отображался и скрывался - PullRequest
Новая
       13

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

0 голосов
/ 27 июня 2010

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

Ответы [ 2 ]

0 голосов
/ 27 июня 2010

@ Ник верно, чистого решения не будет.

Одной из возможностей является задержка кода в размытии, чтобы обработчик щелчков по вашей ссылке мог отправить фокус обратно на вход.

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/

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

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

0 голосов
/ 27 июня 2010

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

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