为什么 show() 只适用于使用内联 css 隐藏的字段？

Question

我使用内联 css 隐藏一个元素，如下所示：

<span class="hidden-nojs" style="display:none">Some text</span>

接下来我使用 jQuery 来显示该元素，如下所示：

$(".hidden-nojs").show();

这效果很好。一旦我删除内联 css 并将 display:none 放在隐藏的 nojs 类的外部 css 样式表上，它就会停止工作。这是我在外部样式表中写的：

.hidden-nojs {
    display: none;  
}

我假设外部样式表在 jQuery 已经运行后加载？这有点烦人，因为我想用 css 隐藏多个元素，并希望避免使用内联 css。

为什么 show() 只适用于使用内联 css 隐藏的字段？我该如何解决这个问题？

Answer 1

问题是您试图隐藏和显示一个内联元素。 jQuery 效果仅适用于块类型元素。 jQuery 效果操纵内联元素样式，这就是该版本有效而​​类版本无效的原因。

如果您考虑一下，块类型元素就是矩形。它们很容易制作生长和缩小的动画，因为您只需制作它们的高度和/或宽度的动画即可。

内联元素不一定是矩形，这就是 jQuery 效果大部分不起作用的原因。举个例子：

<p>Inside paragraph <span class="foo">This is a test</span> contains text.</p>
<input type="button" id="bar" value="Toggle">

运行：

$(function() {
  $("#bar").click(function() {
    $("span.foo").toggle();
  });
});

第一次单击将隐藏它。第二个会将其变成一个块（因为它将不再包含在段落中）。这就是我所说的 jQuery 效果并不真正适用于内联元素的意思。

在内部，jQuery 效果通过动画和在 display: none 和 display: block 之间切换的组合来工作。这意味着 jQuery 效果也不适用于表格单元格。为什么？它们不是 display: block，它们实际上是 display: table-cell。您自己尝试一下，看看多次 toggle() 表格单元格后会发生什么。

那么解决办法是什么呢？对于内联内容，最简单的解决方案就是使用类：

hidden { display: none; }

with

$("span.hideme").toggleClass("hidden");

这没有动画效果。您可以自己添加它，但我不能 100% 保证 animate() 与内联元素的配合效果。

或者，如果您的内容可以成为一个块，那么将其设为一个块，所有这些问题都会消失。在您的情况下，可以使用

而不是 或将 display: block 添加到 <跨度>。

Answer 2

我无法复制这个问题，但我认为这与 Cletus 所说的没有太大关系。这里没有动画吗？

将样式内联与它是内联元素这一事实无关。我过去在使用自制切换可见性脚本和类时遇到过类似的问题。许多简单的实现（例如我的）的工作方式是这样的：

function toggle(el) {
    el.style.display = (el.style.display == 'none') ? '' : 'none';
}

如果它不是隐藏的，请将内联样式更改为隐藏。如果隐藏，删除内联样式。当您删除内联样式时，它会恢复为样式表中定义的样式，这就是它不显示的原因。

就像我说的，我尝试使用 jQuery 的 show() 函数复制您的错误，但无法做到。在我的测试中，jQuery 足够聪明，可以恢复到之前的显示样式，所以我不知道问题到底是什么，但听起来很像我之前遇到的问题。

就解决方案而言，只需删除 hidden-nojs 类即可。