0

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

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

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

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

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

.hidden-nojs {
    display: none;  
}

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

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

4

2 回答 2

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; }

和

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

这没有动画效果。您可以自己添加它，但我不是 100% 可以很好地animate()使用内联元素。

或者，如果您的内容可以成为一个块，请将其设置为一个块，所有这些问题都会消失。在您的情况下，请使用 a<div>而不是 a<span>或添加display: block到<span>.

于 2010-03-22T06:49:12.967 回答
0

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

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

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

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

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

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

于 2010-03-22T08:39:51.077 回答