jQuery: Как применить .blur к * каждому * дочернему элементу div, а не к * любому * дочернему элементу div?

Question

Я создаю в стиле Facebook "Что у тебя на уме?" переключение поля ввода. Я подхожу к этому как комбинация щелчка и размытия. Нажатие на поле ввода автоматически расширит контейнер div и отобразит количество элементов. Это отлично работает. Однако у меня возникли проблемы с тем, чтобы, когда фокус покинул каждый дочерний элемент контейнера div, он возвращал его в отключенном состоянии (меньшие элементы div и скрытые дочерние элементы).

Если я просто сделаю "# container-div> *", для .blur .blur будет срабатывать в любое время любой дочерний элемент теряет фокус, а не когда каждый дочерний элемент теряет фокус ( фокус больше не находится ни на каком дочернем элементе контейнера div). Я попытался изменить $ ("# create-community> *"). Blur на $ ("*") .not ("# create-community> *"). Blur , но это тоже не работает.

Есть предложения?

$("#create > *").click(function() {
  $(".expand").addClass("expand-expand");
  $(".expand-expand").removeClass("expand");
  $("#create").addClass("create-expand");
  $("#create").removeClass("create");
  $(".write-title").addClass("write-title-expand");
  $(".write-title-expand").removeClass("write-title");
  $(".summary").addClass("summary-expand");
  $(".summary-expand").removeClass("summary");
  $(".input").addClass("input-expand");
  $(".input-expand").removeClass("input");
  $(".submit").addClass("submit-expand");
  $(".submit-expand").removeClass("submit");
  $(".name").attr("value", "");
 });

 $("#create > *").blur(function() {
  $(".expand-expand").addClass("expand");
  $(".expand").removeClass("expand-expand");
  $("#create").addClass("create");
  $("#create").removeClass("create-expand");
  $(".write-title-expand").addClass("write-title");
  $(".write-title").removeClass("write-title-expand");
  $(".summary-expand").addClass("summary");
  $(".summary").removeClass("summary-expand");
  $(".input-expand").addClass("input");
  $(".input").removeClass("input-expand");
  $(".submit-expand").addClass("submit");
  $(".submit").removeClass("submit-expand");
  $("#name").attr("value", "write something..."); 

});

Answer 1

Событие размытия всегда срабатывает, когда отдельный элемент теряет фокус. Что вам нужно будет сделать, это проверить, какой элемент был сфокусирован, когда один элемент в #create теряет фокус. Если вновь сфокусированный элемент находится вне div, вы можете изменить классы. Для этого вы можете просто проверить, не является ли сфокусированный элемент дочерним по отношению к # create

Что-то вроде

$("#create > *").blur(function() {
  if($("#create > *:focus").length == 0) {
      $(".expand-expand").addClass("expand");
      $(".expand").removeClass("expand-expand");
      $("#create").addClass("create");
      $("#create").removeClass("create-expand");
      $(".write-title-expand").addClass("write-title");
      $(".write-title").removeClass("write-title-expand");
      $(".summary-expand").addClass("summary");
      $(".summary").removeClass("summary-expand");
      $(".input-expand").addClass("input");
      $(".input").removeClass("input-expand");
      $(".submit-expand").addClass("submit");
      $(".submit").removeClass("submit-expand");
      $("#name").attr("value", "write something..."); 
  }
});

Answer 2

Да, Тоби прав, вам нужно проверить, вышел фокус или нет.Кстати, проще взять дочерние узлы, тоже должно быть быстрее."> *" просто вызывает вопросы.Итак, начните с:

$ ("# create"). Children (). Blur (function () {...}