jQuery .show() 一个弹性框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38491653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .show() a flex box
提问by Buffalo
I have an element with a flexbox
我有一个带有 flexbox 的元素
<ul id="myFlexbox">
div#myFlexbox{
display:flex;
}
after hide it and show it, it gets messed up.
在隐藏它并显示它之后，它变得一团糟。
$('#myFlexbox').show();
now the element has a display of block instead of flex.
现在该元素显示的是块而不是 flex。
<ul id="myFlexbox" style="display: block;">
How can I use .hide and .show with flexboxes?
如何将 .hide 和 .show 与 flexbox 一起使用？
回答by guizo
The show()adds display:blockas a default for div. You can change the displayto flexusing jQuery css():
该show()增加display:block为默认div。您可以更改display到flex使用jQuery css()：
$('#myFlexbox').css('display', 'flex');
回答by mxlse
JQuery .show()doesn't know about your display: flex;(not flexbox). Instead try to add and remove a hiding class.
JQuery.show()不知道您的display: flex;（不是 flexbox）。而是尝试添加和删除隐藏类。
CSS:
CSS：
#myFlexbox{
display: flex;
}
.hide{
display: none !important;
}
JS:
JS：
$('#myFlexbox').addClass('hide');
$('#myFlexbox').removeClass('hide');
https://jsfiddle.net/p2msLqtt/
https://jsfiddle.net/p2msLqtt/
Otherwise you have to execute your JS after the CSS is completely loaded and DOM is ready I guess - i.e. like:
否则，您必须在 CSS 完全加载并且 DOM 准备就绪后执行您的 JS，我猜 - 即：
<html>
<head>
<!-- CSS -->
</head>
<body>
<!-- BODY PART -->
<!-- SCRIPT TO HIDE AND SHOW -->
</body>
</html>
Updated the fiddle and set Javascript execution to domready - it's working:
更新了小提琴并将 Javascript 执行设置为 domready - 它正在工作：
回答by Nikolay
just use
只是使用
.class{display: none}
.class[style*='display: block']{
display: flex !important;
}
when jquery add styl attribut css will be applied, works perfectly on Chrome and Mozilla
当 jquery add styl 属性 css 将被应用时，在 Chrome 和 Mozilla 上完美运行
回答by ecoble
You should wrap your display: flexcontent with an element.
你应该display: flex用一个元素包装你的内容。
<div id="flexWrapper">
<ul id="myFlexbox"></ul>
</div>
bind your javascript show/hide to '#flexWrapper'
将您的 javascript 显示/隐藏绑定到“#flexWrapper”
回答by aliqandil
Since other answers did not account for the possibility that you might be using the durationargument...
由于其他答案没有考虑到您可能正在使用该duration参数的可能性......
Short Answer:Use .hidefor hiding the value and that shouldn't happen.
简短回答：使用.hide隐藏值，这不应该发生。
A little explanation:
一点解释：
The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of flexand is hidden then shown, it will once again be displayed flex.
匹配的元素将立即隐藏，没有动画。这大致相当于调用 .css("display", "none")，只是 display 属性的值保存在 jQuery 的数据缓存中，以便稍后可以将 display 恢复到其初始值。如果一个元素的显示值为flex并且被隐藏然后显示，它将再次显示为flex。
From documentation, Changed 'inline' to 'flex' to fit the contenxt!
从文档中，将 'inline' 更改为 'flex' 以适应上下文！
So jQueryknows what you're hiding! If you've hidden it using .hidethat is, And it knows how to show it again with the right display value.
所以jQuery知道你在隐藏什么！如果您使用.hide隐藏了它，那么它知道如何使用正确的显示值再次显示它。
回答by fanta
The classsolution works, yes.
Here's a different approach I came up with:
该class解决方案的工作，是的。这是我想出的不同方法：
Javascript Function
Javascript 函数
function showFlex(element) {
var flexContainer = document.getElementById(element);
flexContainer.setAttribute("style", "display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;");
}
To use it:
要使用它：
showFlex( "yourIDhere" );
Note that the ID doesn't need the # when you call the function.
请注意，调用该函数时 ID 不需要 #。
Example:
例子：
回答by Pedro Acosta Pilataxi
I know it is a little too late (3 years) but this is the way I managed to do it.
我知道这有点太晚了（3 年），但这是我设法做到的方式。
I created a rule in css for my div, for example #myDiv, that goes like this
我在 css 中为我的 div 创建了一个规则，例如#myDiv，就像这样
#myDiv[style*='block'] {
display: inline-flex !important;
}
It takes advantage of what jQuery does to the DOM, it applies 'display:block'. I used inline-flex because i needed it for what i'm doing, but it can be whatever you want. In this way the rule goes faster applied without any flickering.
它利用了 jQuery 对 DOM 所做的事情，它应用了“display:block”。我使用 inline-flex 因为我需要它来做我正在做的事情，但它可以是你想要的任何东西。通过这种方式，规则应用得更快，没有任何闪烁。
回答by Gibin Ealias
The idea is to create a custom function showFlex()similar to jQuery show()and call it with the element which need to have the display:flex;property.
这个想法是创建一个showFlex()类似于 jQuery的自定义函数，show()并使用需要具有该display:flex;属性的元素来调用它。
jQuery Solution
jQuery 解决方案
$.fn.showFlex = function() {
this.css('display','flex');
}
$('#myFlexbox').showFlex();
$('#myFlexbox').showFlex();
JavaScript Solution
JavaScript 解决方案
Object.prototype.showFlex = function() {
this.style.display = 'flex';
}
document.getElementById('myFlexbox').showFlex();
document.getElementById('myFlexbox').showFlex();
Hope this helps.
希望这可以帮助。
