Javascript display:flex使用jquery hide/show和googlewebfont随机转换为display:block_Javascript_Jquery_Html_Css

Javascript display:flex使用jquery hide/show和googlewebfont随机转换为display:block

javascript jquery html css

Javascript display:flex使用jquery hide/show和googlewebfont随机转换为display:block,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在对元素调用jquery的css（“display”）时，我得到了不可预测的结果；有时是flex，有时是block。奇怪的是，只有当我使用jquery的show/hide时，才会出现此错误，并且大约50%的时间都会发生此错误。更奇怪的是，我在运行hide之前就看到了这些结果更新：它似乎也与我的加入有关。如果我删除字体，问题就会消失。这一切都很奇怪以下是我的代码的简化： js: html: 应打印出正确的行为： 1 display: flex 2 display: none 3 displ

在对元素调用jquery的

css（“display”）

时，我得到了不可预测的结果；有时是flex，有时是block。奇怪的是，只有当我使用jquery的

show

hide

时，才会出现此错误，并且大约50%的时间都会发生此错误。更奇怪的是，我在运行

hide

之前就看到了这些结果

更新：它似乎也与我的加入有关。如果我删除字体，问题就会消失。这一切都很奇怪

以下是我的代码的简化：

js:

html:

应打印出正确的行为：

1 display: flex
2 display: none
3 display: flex

但我在50%的时间里看到的是：

1 display: block
2 display: none
3 display: block

你知道是什么导致了这一切吗？我想知道为什么编辑：根据隐藏将保存以前的状态。但在你的情况下，它似乎不起作用。解决方案：

css:

因此，用my js替换js，并将.hideFlex添加到css中。应该可以工作。

您的代码在最新版本的jquery中工作

IMO不管问题是什么，问题在于您的代码（甚至可能是CSS）设置在某个点显示为阻塞，而您没有意识到这一点。

尝试使用addClass和removeClass。隐藏并显示将值设置为“块”

.flex {

display: flex;

}

$('selector').addClass('flex');  //show
$('selector').removeClass('flex'); //hide

在不良输出中，显示的初始值为块。这不是show方法的错误

您确定在CSS计算之后会执行脚本吗

检查您的文档结构：

<!DOCTYPE html>
<html>
  <head>
    <!-- css include/import -->
  </head>
  <body>
    <!-- html body -->
    <!-- script include/import -->
  </body>
</html>

要使JQuery hide（）和show（）函数正常工作（保持原始显示值），在调用函数时，元素应该是DOM的一部分。也许Google Webfonts临时从DOM卸载您的内容

问题可以这样重现：

#foo{
显示器：flex；
}
$（文档）.ready（函数（）{
变量my=$（“…”）
log（“1显示：”+my.css（“显示”）；
我的。隐藏（）；
log（“2显示：”+my.css（“显示”）；
我的.show（）；
log（“3显示：”+my.css（“显示”）；
$（“正文”）。附加（我的）；
console.log（“4显示：+my.css（“显示”））；
});

show（）和hide（）将始终导致“block”/“none”。如果你想要flex，你应该像这样使用css类：

$（'#foo'）.addClass（'flex'）$（“#foo”）.removeClass（'flex'）.addClass（'hideFlex'）

hide（）

不了解

flex

。用

display:block

将你的

#foo

包装在一个div中，它应该可以工作。@FabianLurz@thebjorn

hide

的文档声称它将保存以前的显示值，以便

show

还原。另外，请注意在调用

hide

之前如何打印“

1 display:block

”。在jquery 2.1.3中工作正常。匹配的元素将立即显示，没有动画。这大致相当于调用.css（“display”，“block”），除了显示属性还原为最初的状态外。如果元素的显示值为inline，则隐藏并显示，它将再次以内联方式显示。“从jQuery API文档中，我更喜欢您的。隐藏类比flex类好，是吗？@Techniv这里也是，那么他的问题是什么？我在fiddle上测试了它，一直到v1.6，在那里工作得很好。我猜想它会被浏览器（关键字html样板）覆盖。我的答案中有一个假设。但不确定。我只是把完整的html贴到了问题上。也许我的顺序错了？是的，你的脚本导入在CSS之前。最好的做法是将其放在正文的末尾，以优化加载和执行顺序。更改包含的顺序似乎可以解决问题。我将把这个问题留待讨论，因为我还没有发现为什么这在这里很重要。这来自页面构造中脚本的执行顺序。在第一个版本中，在加载CSS之前执行脚本。当DOM就绪但在CSS呈现结束之前，文档就绪即被激发。当获得显示值时，渲染可能已完成，但不确定。这取决于你的计算机资源。如果将脚本放在末尾，则在CSS计算之后加载并执行脚本，所有操作都正常。我想你也可以将超时设置为500，但这很难看。

1 display: block
2 display: none
3 display: block

$(document).ready(function () {
    console.log("1 display: " + $("#foo").css("display"));
    $("#foo").addClass('hideFlex');
    console.log("2 display: " + $("#foo").css("display"));
    $("#foo").removeClass('hideFlex');
    console.log("3 display: " + $("#foo").css("display"));
});

   .hideFlex{
    display:none;
    }

.flex {

display: flex;

}

$('selector').addClass('flex');  //show
$('selector').removeClass('flex'); //hide

<!DOCTYPE html>
<html>
  <head>
    <!-- css include/import -->
  </head>
  <body>
    <!-- html body -->
    <!-- script include/import -->
  </body>
</html>

#foo {
    display: flex;
}

$(document).ready(function () {

    var my = $("<div id='foo'>......</div>")
    console.log("1 display: " + my.css("display"));
    my.hide();
    console.log("2 display: " + my.css("display"));
    my.show();
    console.log("3 display: " + my.css("display"));
    $("body").append(my);
    console.log("4 display: " + my.css("display"));
});