logo标签列表

jQuery .show()和弹性盒子布局

jquerycssflexbox
66

我有一个带有flexbox的元素

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}
隐藏和显示后，它变得混乱了。
$('#myFlexbox').show();

现在该元素的显示方式为块状而非弹性布局。

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

如何在使用flexbox时使用.hide和.show方法？

10个回答
100

show()方法默认为div元素添加了display:block样式。您可以使用jQuery的css()方法将display属性更改为flex：

$('#myFlexbox').css('display', 'flex');
15
这会在你的JS和CSS之间创建一个硬编码链接。如果你决定更改你的CSS，以便#myFlexbox不再是flex，那么你的JS就不正确了。我更喜欢mxlse的答案。 - strotter
此功能不支持 duration 参数。 - Vladimir
看看 Nikolay 的优秀解决方案（https://dev59.com/3FkT5IYBdhLWcg3wh_tU#53559345）。您仍然可以使用 show() 和 hide()，而无需更改您的 JavaScript 代码。 - RWC
47

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 参数。 - Vladimir
18

只需使用

.class{display: none}

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

当jQuery添加样式属性时，CSS将被应用，在Chrome和Mozilla上完美运行。

2
我认为这是最好的解决方案，因为它允许您继续使用show()。简单的CSS更改不需要大量的js更改来检查当前状态。真是个好主意！ - E Benzle
这太聪明了！ - RWC
7

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

jQuery解决方案

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

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

JavaScript Solution

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

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

希望这可以帮助您。

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

虽然有点晚（3年），但这是我处理的方法。

我在CSS中为我的div元素，比如 #myDiv，创建了一个规则，如下所示：

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

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

5

由于其他回答没有考虑到您可能会使用duration参数的情况...

简短回答：使用.hide隐藏值即可，这样不应该发生。

稍作解释：

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

来自文档，将“inline”更改为“flex”以适应上下文！

因此，jQuery知道您正在隐藏什么！如果您使用.hide进行隐藏，那么它知道如何使用正确的显示值再次显示它。

1
这很棒，但是你如何处理可能发生的“闪烁”问题。因为页面加载时元素可见，所以它会在“隐藏”之前在屏幕上停留一秒钟。过去我总是将CSS默认设置为display:none，然后使用.show()方法将其显示出来。 - Adam Christianson
3
首先想到的是使用一个包装器，其display值设置为none，直到页面加载完毕... - aliqandil
5
您应该使用一个元素来包裹您的 display: flex 内容。
<div id="flexWrapper">
    <ul id="myFlexbox"></ul>
</div>

将您的JavaScript show/hide绑定到“#flexWrapper”。
3

使用 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/
2
$('#myFlexbox').show({
    start: function() {
        $(this).css('display', 'flex');
    }
});
1
虽然这段代码可能解决了问题，但最好还是解释一下你的代码如何解决问题。这样，未来的访问者可以从您的帖子中学习，并将其应用到自己的代码中。SO不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能被点赞。这些特点以及所有帖子都必须是自包含的要求，是SO作为一个平台的一些优势，这使它与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。 - ysf
0
尝试使用以下代码：$(this).show().css('display', 'flex'); 正常显示并将其设置回flex。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接