jQuery：如何将 .blur 应用于 div 的*每个*子元素，而不是 div 的*任何*子元素？

Question

我正在创建一个 Facebook 风格的“你在想什么？”切换输入框。我接近它的方式是点击和模糊的组合。单击输入框将自动展开容器 div 并显示许多元素。这很好用。但是，我在制作它时遇到了麻烦，以便当焦点离开容器 div 的每个子元素时，它会返回关闭状态（较小的 div 和隐藏的子元素）状态。

如果我只是执行“#container-div > *”，对于 .blur，任何时候 任何 子元素失去焦点都会触发 .blur，而不是当每个子元素失去焦点时（焦点不再位于容器 div 的任何子元素上）。我尝试将 $("#create-community > *").blur 更改为 $(" * ").not("#create-community > *")。模糊，但这也不起作用。

有什么建议吗？

$("#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() {
...
}