jQuery .show() 一个弹性盒子答案

【问题标题】：jQuery .show() a flex boxjQuery .show() 一个弹性盒子
【发布时间】：2016-11-24 07:17:18
【问题描述】：

我有一个带有弹性框的元素

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

隐藏后显示出来，就乱了。

$('#myFlexbox').show();

现在元素显示的是块而不是弹性。

<ul id="myFlexbox" style="display: block;">

如何将 .hide 和 .show 与 flexbox 一起使用？

【问题讨论】：

标签： jquery css flexbox

【解决方案1】：

试试$(this).show().css('display', 'flex');

正常显示并设置回flex

【讨论】：

【解决方案2】：

$('#myFlexbox').show({
    start: function() {
        $(this).css('display', 'flex');
    }
});

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释

【解决方案3】：

我知道这有点太晚了（3 年），但这是我设法做到的。

我在 css 中为我的 div 创建了一条规则，例如 #myDiv，如下所示

#myDiv[style*='block'] {
    display: inline-flex !important;
}

它利用了 jQuery 对 DOM 的作用，它应用了“display:block”。我使用 inline-flex 是因为我需要它来做我正在做的事情，但它可以是你想要的任何东西。通过这种方式，规则可以更快地应用而不会出现任何闪烁。

【讨论】：

【解决方案4】：

这个想法是创建一个类似于 jQuery 的自定义函数showFlex() show() 并使用需要具有display:flex; 属性的元素调用它。

jQuery 解决方案

$.fn.showFlex = function() {
  this.css('display','flex');
}

$('#myFlexbox').showFlex();

JavaScript 解决方案

Object.prototype.showFlex = function() {
    this.style.display = 'flex';
}

document.getElementById('myFlexbox').showFlex();

希望这会有所帮助。

【讨论】：

jQuery 解决方案应该是$.fn.showFlex = function(){ this.css({'display':'flex'}); }

【解决方案5】：

随便用

.class{display: none}

.class[style*='display: block']{
    display: flex !important;
}

当 jquery add styl 属性 css 将被应用时，在 Chrome 和 Mozilla 上完美运行

【讨论】：

我认为这是最好的解决方案，因为它允许您继续使用 show()。简单的 CSS 更改，不需要一堆 js 更改来检查当前状态。真是个好主意！
这真是天才！

【解决方案6】：

show() 添加display:block 作为div 的默认值。您可以使用 jQuery css() 将 display 更改为 flex：

$('#myFlexbox').css('display', 'flex');

【讨论】：

这会在你的 JS 和你的 css 之间创建一个硬编码的链接。现在，如果您决定更改 css 以使 #myFlexbox 不再是 flex，那么您的 JS 是不正确的。我更喜欢 mxlse 的回答。
这个不支持duration参数。
看看 Nikolay (stackoverflow.com/a/53559345/760777) 的优秀解决方案。您仍然可以使用 show() 和 hide() 并且您不必更改您的 javascript 代码。

【解决方案7】：

class 解决方案有效，是的。这是我想出的另一种方法：

Javascript 函数

function showFlex(element) {

    var flexContainer = document.getElementById(element);

    flexContainer.setAttribute("style", "display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;");
}

使用它：

showFlex( "yourIDhere" );

请注意，调用函数时，ID 不需要 #。

示例：

https://codepen.io/florantara/pen/aLeyYb/

【讨论】：

【解决方案8】：

由于其他答案没有考虑到您可能使用duration 参数的可能性...

简答：使用.hide 隐藏值，这是不应该发生的。

一点解释：

匹配的元素将立即隐藏，没有动画。这大致相当于调用 .css( "display", "none" )，除了 display 属性的值保存在 jQuery 的数据缓存中，以便稍后可以将 display 恢复到初始值 .如果一个元素的显示值为 flex 并且被隐藏然后显示，它将再次显示 flex。

_{从文档中，将 'inline' 更改为 'flex' 以适应上下文！}

所以 jQuery 知道你在隐藏什么！如果你用.hide隐藏了它，它知道如何用正确的显示值再次显示它。

【讨论】：

这很好，但是您如何处理可能发生的“闪烁”。因为页面加载时元素可见，所以它在“隐藏”之前在屏幕上显示了一秒钟。在过去，这就是为什么我总是将 CSS 默认为 display:none，然后使用 .show() 方法将其显示出来。
嗯，首先想到的就是在页面加载之前使用带有 display:none 值的包装器......

【解决方案9】：

你应该用一个元素包裹你的 display: flex 内容。

<div id="flexWrapper">
    <ul id="myFlexbox"></ul>
</div>

将您的 javascript 显示/隐藏绑定到“#flexWrapper”

【讨论】：

【解决方案10】：

JQuery .show() 不知道您的 display: flex;（不是 flexbox）。而是尝试添加和删除隐藏类。

CSS：

#myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

JS：

$('#myFlexbox').addClass('hide');
$('#myFlexbox').removeClass('hide');

https://jsfiddle.net/p2msLqtt/

否则，我猜你必须在 CSS 完全加载并且 DOM 准备好之后执行你的 JS - 即像：

<html>
  <head>
    <!-- CSS -->
  </head>
  <body>
    <!-- BODY PART -->
    <!-- SCRIPT TO HIDE AND SHOW -->
  </body>
</html>

更新了小提琴并将 Javascript 执行设置为 domready - 它正在工作：

https://jsfiddle.net/p2msLqtt/1/

【讨论】：

这个不支持duration参数。