Buf*_*alo 33 css jquery flexbox
我有一个元素宽度flexbox
<ul id="myFlexbox">
div#myFlexbox{
display:flex;
}
隐藏它并显示它之后,它就搞砸了.
$('#myFlexbox').show();
现在元素有一个块而不是flex的显示.
<ul id="myFlexbox" style="display: block;">
如何在Flexbox中使用.hide和.show？
gui*_*izo 58
该show()增加display:block为默认div.您可以更改display到flex使用jQuery css():
$('#myFlexbox').css('display', 'flex');
mxl*_*lse 16
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/
这个想法是创建一个showFlex()类似于 jQuery 的自定义函数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();
希望这可以帮助。
只是使用
.class{display: none}
.class[style*='display: block']{
display: flex !important;
}
当jquery add styl属性css将被应用时，在Chrome和Mozilla上完美运行
我知道现在有点晚了（三年了），但这就是我设法做到的方式。
我在 css 中为我的 div 创建了一条规则，例如 #myDiv，如下所示
#myDiv[style*='block'] {
display: inline-flex !important;
}
它利用了 jQuery 对 DOM 所做的事情，它应用了“display:block”。我使用 inline-flex 是因为我需要它来完成我正在做的事情，但它可以是你想要的任何东西。通过这种方式，规则可以更快地应用，而不会出现任何闪烁。
小智 5
你应该display: flex用一个元素包装你的内容。
<div id="flexWrapper">
<ul id="myFlexbox"></ul>
</div>
将您的 javascript 显示/隐藏绑定到“#flexWrapper”
由于其他答案并未说明您使用duration参数的可能性...
简短答案：使用.hide隐藏值，这种情况不应该发生。
一点解释：
匹配的元素将立即隐藏，没有动画。除了将display属性的值保存在jQuery的数据缓存中，以便以后可以将显示恢复到初始值之外，这大致等效于调用.css（“ display”，“ none”）。如果一个元素的显示值为flex并被隐藏然后显示，那么它将再次显示为flex。
从文档开始，将“ inline”更改为“ flex”以适应竞争！
因此jQuery知道您隐藏了什么！如果您使用.hide隐藏了它，那么它将知道如何使用正确的显示值再次显示它。
| 归档时间： |
|
| 查看次数： |
29027 次 |
| 最近记录： |