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

Question

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

如果我只是“＃container-div＆gt; *”，对于.blur，.blur将在任何子元素失去焦点时触发，而不是在每个子元素丢失时触发焦点（焦点不再是容器div的任何子元素）。我尝试将 $（“＃create-community＆gt; *”）。模糊更改为 $（“*”）。not（“＃create-community＆gt; *”）。模糊，但这也不起作用。

有什么建议吗？

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

是的，托比是对的，你必须测试焦点是否在外面。 顺便说一下，接收节点的孩子更容易，也应该更快。 “＆gt; *”只是提出问题。所以从：

开始

$（“＃create”）。children（）。blur（function（）{ ... }