JQuery: how can I apply .blur to * every * child of a div, and not to * any * child of a div?

Question

I am creating a Facebook style of “What's on your mind?” switching input window. The way I get closer to it is a combination of clicks and blur. Clicking on the input field will automatically expand the div container and display several elements. It works great. However, I am having problems with the fact that when the focus leaves each child of the div container, it will return it to its original state (smaller divs and hidden children).

If I just do "# container-div> *", for .blur, .blur will be triggered at any time when any child loses focus, and not when every child loses focus (focus is no longer included on any child of the div container ) I tried changing $ ("# create-community> *"). Blur on $ ("*") .not ("# create-community> *"). Blur , but that doesn't work either.

Any suggestions?

$("#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

, , , . , node, . " > *" . , :

$( "# create" ). children(). blur (function() { ... }