JQuery 3.1.1 和 CSS 弹性框答案

【问题标题】：JQuery 3.1.1 and CSS flexboxJQuery 3.1.1 和 CSS 弹性框
【发布时间】：2016-10-05 01:49:19
【问题描述】：

在使用JQuery的淡入功能时，如果一个元素以'display: none'开头然后淡出，JQuery会在该项目淡入时注入'display: block'。

在 flexbox 布局中，这会导致元素换行到下一行。

当我在父级上禁用 display:flex 时，它的行为符合预期。

有没有办法在最初需要隐藏的特定元素上禁用display:flex？

我可以通过使用来克服这个问题：

$('el').fadeIn().css('display','inline-block');

但这种方法在这种情况下是不可取的。有什么建议吗？

这是一个演示

$('#clickme').click(function() {
  $('#test').fadeToggle();
  return false;
});

#flex {
  display: flex; /* BREAKS JQUERY FADE, JQUERY INJECTS DISPLAY:BLOCK; */
  flex-direction: column;
}
#main {
  flex: 1;
}
.hidden {
  display: none;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<body id="flex">
  <div id="main">
    <span class="tools"> 
      <a class="a" href="" id="clickme">Click Me</a>
      <span id="test" class="hidden">I should be inline!</span>
    </span>
  </div>
</body>

如果您在 #flex 上禁用 display:flex，它会按预期/预期工作。

【问题讨论】：

这里的演示可能有用
jsfiddle.net/60xush0w
我认为使用 Jquery 的 "fade" 在本机上是不可能的。没有应该应用的“display:flex-item”。不幸的是，您可能必须在这里编写自己的函数。
@Paulie_D 但他的<span> 元素与id 测试不是弹性项目，我仍然想知道为什么它添加display: block; 而不是内联。将 flex 应用于他的工具 span 现在将使 #test 成为 flex-item，这就是您的解决方案有效的原因。
我不建议在您的<body> 标签中使用display: flex;。这可能是您可能遇到的众多问题之一，并且没有必要将 flexbox 用于二维布局。

标签： jquery css flexbox

【解决方案1】：

那是因为，当你显示一个元素时，jQuery 必须猜测它的display。那是因为 CSS 设计得很糟糕。 dislay: none 不应该存在。

jQuery 在其getDefaultDisplay 函数中执行此操作：

function getDefaultDisplay( elem ) {
    var temp,
        doc = elem.ownerDocument,
        nodeName = elem.nodeName,
        display = defaultDisplayMap[ nodeName ];

    if ( display ) {
        return display;
    }

    temp = doc.body.appendChild( doc.createElement( nodeName ) );
    display = jQuery.css( temp, "display" );

    temp.parentNode.removeChild( temp );

    if ( display === "none" ) {
        display = "block";
    }
    defaultDisplayMap[ nodeName ] = display;

    return display;
}

基本上，它创建一个相同类型的新元素并将其插入到正文中。它的计算 display 被认为是正在显示的元素的默认显示。这种方法太容易上当了，旧版本的 jQuery 在 IMO 上更好。

无论如何，他的问题是您将body 样式化为弹性容器。弹性容器的子容器被阻塞。因此，该虚拟元素的计算 display 将是 "block"，这就是您的元素将收到的内容，即使您的元素不参与 flex 布局。

所以最好避免在身体上使用display: flex。您可以添加一个包装器。

$('#clickme').click(function() {
  $('#test').fadeToggle();
  return false;
});

#flex {
  display: flex;
  flex-direction: column;
}
#main {
  flex: 1;
}
.hidden {
  display: none;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="flex">
  <div id="main">
    <span class="tools"> 
      <a class="a" href="" id="clickme">Click Me</a>
      <span id="test" class="hidden">I should be inline!</span>
    </span>
  </div>
</div>

【讨论】：

【解决方案2】：

您需要将 flexbox 应用到 .tools 跨度

	  		$(document).ready(function() {

	  		  $('#clickme').click(function() {
	  		    $('#test').fadeToggle();
	  		    return false;
	  		  })

	  		});

#flex {
  display: flex;
  /* BREAKS JQUERY FADE, JQUERY INJECTS DISPLAY:BLOCK; */
  //flex-direction: column;

}
#main {
  flex: 1;
}
.tools {
  display: flex;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="flex">

  <div id="main">

    <span class="tools"> 
    <a class="a" href="#01" id="clickme">Click Me</a>
    <span id="test" class="hidden">I should be inline!</span>
    </span>

  </div>

【讨论】：

适用于示例，但这只是包装了整个跨度，它应该保持内联...
我不确定您的意思，您的意思是您不希望隐藏的跨度永远中断？ white-space:nowrap 会这样做。
在这种情况下不是，默认情况下也不是 .. 跨度应该始终是一个内联元素 .. 自定义函数有效，有点骇人听闻，但它有效且足够简单 .. 出于某种原因我讨厌通过 javascript/jquery 添加 CSS .. 可能只是我
那么正如我所说，我怀疑你必须编写自己的函数。

【解决方案3】：

最终，这样的事情是有效的：

$.fn.inline = function() {
    this.css({'display':'inline'});
};

用法：

$('el').fadeToggle().inline();

【讨论】：