jQuery:如何将.blur应用于div的*每个*子元素，而不是div的* any *子元素? [英] jQuery: How do I apply .blur to *every* child element of a div, rather than *any* child element of a div?

问题描述

我正在创建一种Facebook风格的您在想什么?"切换输入框.我接近它的方式是单击和模糊结合.单击输入框将自动展开容器div并显示许多元素.这很好.但是，我很难做到这一点，以便当焦点离开容器div的每个子元素时，它将返回它处于关闭状态(较小的div和隐藏的子元素)状态.

I'm creating a Facebook-style "What's on your mind?" toggling input box. The way that I'm approaching it is a click and blur combination. Clicking an input box will auto-expand the container div and display a number of elements. This works fine. However, I have had trouble making it so that when the focus leaves every child element of the container div, it would return it is toggled-off (smaller div and hidden child elements) state.

如果我只是执行#container-div> *"，那么对于.blur，.blur将在任何子元素失去焦点时触发，而不是在每个子元素失去焦点时触发. (焦点不再放在容器div的任何子元素上).我尝试将 $(#create-community> *").blur 更改为 $("*").not(#create-community> *").blur ，但这也不起作用.

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

有什么建议吗?

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

});

推荐答案

当单个元素失去焦点时，模糊事件将始终触发.您需要做的就是检查#create中的单个元素失去焦点时要聚焦的元素.如果新聚焦的元素在div之外，则可以更改类.为此，您可以简单地检查一下focuseded元素是否不是#create

The blur event will always fire when a single element loses focus. What you will need to do is check what element has been focused when a single element in #create loses focus. If the newly focussed element is outside of the div then you can change the classes. To do this you can simply check if the focussed element is not a child of #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..."); 
  }
});

这篇关于jQuery:如何将.blur应用于div的*每个*子元素，而不是div的* any *子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！