jQuery：如何將.blur應用於div的每個*子元素而不是div的任何*子元素？

Question

我正在創建一個Facebook風格的「你在想什麼？」切換輸入框。我接近它的方式是點擊和模糊組合。點擊一個輸入框會自動展開容器div並顯示一些元素。這工作正常。但是，我很難做到這一點，以便當焦點離開容器div的每個子元素時，它將返回它被切換（更小的div和隱藏的子元素）狀態。

如果我只是做「＃容器DIV> *」，對於.blur，該.blur將觸發任何時候任何子元素失去焦點，而不是在每一個子元素失去焦點（重點是不再在容器div的任何子元素上）。我嘗試更改$（「＃create-community> *」）。blur to $（「*」）.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 > *").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

呀，託比是正確的，你一定要考重點是否跑到外面與否。 順便說一句，只是帶走節點的孩子會更容易，應該也會更快。 「> *」只是提出問題。因此，與啓動：

$（ 「＃創建」）兒童（）模糊（函數（）{ ... }

。