jQuery: Comment appliquer .blur à * chaque * élément enfant d'un div, plutôt que * any * élément enfant d'une div?

Question

Je crée un style Facebook "Qu'est-ce que tu penses?" bascule la zone de saisie. La façon dont je l'approche est une combinaison de clic et de flou. En cliquant sur une zone de saisie, le div conteneur sera automatiquement développé et affichera un certain nombre d'éléments. Cela fonctionne bien. Cependant, j'ai eu du mal à faire en sorte que lorsque le focus quitte tous les éléments enfants du conteneur div, il retourne l'état bascule (div plus petit et éléments enfants cachés).

Si je viens de faire « # conteneur div> * », pour le .blur, le .blur sera déclenché tout moment tout élément enfant perd le focus, plutôt que lorsque tous les éléments de l'enfant perd le focus (l'accent est mis plus sur aucun élément enfant du conteneur div). J'ai essayé de changer $ ("# create-community> *"). Flou à $ ("*") .not ("# create-community> *"). Flou, mais cela ne fonctionne pas non plus.

Des 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

L'événement de flou est toujours déclenché lorsqu'un seul élément perd le focus. Ce que vous devrez faire est de vérifier quel élément a été focalisé quand un seul élément de #create perd le focus. Si l'élément nouvellement focalisé est en dehors du div alors vous pouvez changer les classes. Pour ce faire, vous pouvez simplement vérifier si l'élément est focalisé pas un enfant de #create

Quelque chose comme

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

Ouais, Toby est juste, il faut vérifier si l'accent est sorti ou non. Btw, il est plus facile de simplement prendre les enfants du nœud, devrait être plus rapide aussi. "> *" ne fait que soulever des questions. Donc, commencer par:

$ ("# créer") enfants() Flou (function() { ...}

..