Question

注意：我发现了问题的原因。有关详细信息，请参阅下文。

我会简明扼要。这是我的情景：

HTML文件：

<form id="login">
<label for="editable">i'm a label for editable</label>
<input id="editable" type="text" />
</form>

CSS文件：

#login label { display: block }

JS文件：

$(document).ready(function() {
  $('#login label').hide().show();
});

所需的行为是使用相同的CSS属性（display: block）再次显示该元素，但在DOM中似乎label元素获得另一个（可能是默认的？）的元素（在这种情况，display: inline）。 注意：我已检查过HTML和CSS文件。一切都是正确的。问题出在javascript文件中。

关于jQuery的API文档，关于.hide()方法：

没有参数，.hide（）方法是隐藏元素的最简单方法：

$（＆＃39; .TARGET＆＃39）隐藏（）;

匹配的元素将立即隐藏，无动画。这大致相当于调用.css（＆＃39; display＆＃39;，＆＃39; none＆＃39;），除了显示属性的值保存在jQuery的数据缓存中，所以该显示稍后可以恢复到其初始值。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。

关于jQuery的API文档，关于.show()方法：

没有参数，.show（）方法是显示元素的最简单方法：

$（＆＃39; .TARGET＆＃39）。显示（）;

匹配的元素将立即显示，没有动画。这大致相当于调用.css（＆＃39; display＆＃39;，＆＃39; block＆＃39;），除了显示属性恢复到最初的。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。

我错过了什么吗？我错了吗？或者只是一种不理想的行为？

提前致谢。

解决方案

先包含CSS，然后再包含JS。

Answer 1

hide()和show()不会更改元素的CSS类的属性。

将display:none设置为默认隐藏的任何内容的内嵌样式。不要把它放在CSS类中，一切都会正常工作。

Answer 2

先包含CSS，然后再包含JS。

Answer 3

这适用于FF3.6，IE8，Safari5，Chrome和OPERA10

这是demo http://www.jsfiddle.net/kjwxu/

试试这个

$(document).ready(function() {
  $('#login label').hide().show("fast", function() {$(this).attr("display", "block")});
});

另外值得注意的是，如果您不喜欢闪烁，那么您可以删除“fast”并替换为1（意味着1毫秒）

这是demo http://www.jsfiddle.net/kjwxu/3/

Answer 4

不确定您遇到此问题的原因，但解决方法是添加一个类以便设置样式。

CSS

#login label { display: block }
#login label.hidden { display: none }

JS

$('#login label').addClass('hidden').removeClass('hidden');

编辑：从我们在评论中的讨论看来，评论出额外的CSS导入修复了这个问题。

.hide（）和.show（）没有正确缓存CSS的显示属性

4 个答案: