Jquery Javascript适用于Firefox和IE，但不适用于Chrome

我有一个网页，我认为有太多的内容显示在同一时间，所以我写了一些JavaScript隐藏一堆图像，直到他们需要。在该页面的底部，我有一个链接，上面写着：“点击这里获取屏幕截图！”点击后，JS将显示一个先前隐藏的范围，其中包含所有屏幕截图。链接文本更改为“单击此处隐藏屏幕截图”。这在IE和Firefox中有效，但由于某些原因，在Chrome中不起作用（在Chrome中，我必须单击隐藏链接3次，然后才能再次隐藏跨度）。代码相当简单，但我不知道它有什么问题。有什么想法吗

JS：

$('#show').click(function(){
$('#Screenies').show('slow');
$('#show').hide();
$('#hide').show();
});

$('#hide').click(function(){
$('#Screenies').hide('slow');
$('#hide').hide();
$('#show').show();
});

Html：

 <p id="show" style="cursor:pointer; color:Navy"><u>Click here for sceenshots!</u></p>
 <p id="hide" style="cursor:pointer; color:Navy"><u>Hide sceenshots</u></p>
 <span id="Screenies">
      [Image links in here]
 </span>

点击此处观看sceenshots
隐藏图片

[此处有图片链接]

编辑：

---

忘了提到我正在使用Jquery 1.6，这与您正在为span元素设置动画有关-不要问我为什么。但是如果您使用的是语义标记，那么实际上应该使用div来保存图像。我也重新分解了你的代码，所以现在你只需要一个链接

$('#show').toggle(function(){
    $('#Screenies').show('slow');
    $('#show').text('Hide');
}, function(){
    $('#Screenies').hide('slow');
    $('#show').text('Show');
});

---

如果您不知道jQuery toggle函数，那么代码的其余部分只是在中设置元素动画，然后根据当前状态更改链接文本。

在代码运行时，Chrome可能找不到元素。最好将该代码包装到document.ready事件中，如下所示：

$(document).ready(function() {
$('#show').click(function(){
$('#Screenies').show('slow');
$('#show').hide();
$('#hide').show();
});

$('#hide').click(function(){
$('#Screenies').hide('slow');
$('#hide').hide();
$('#show').show();
});
});

---

这就成功了。

我怀疑隐藏动画与此有关。您可以尝试不使用它吗？如果您在每个方法中添加一个

警报（）

，它会在前两次单击时出现在chrome中吗？下载firebug for chrome并运行console.log（）函数，以确保在您单击该函数时该函数正在运行，或者警报可以工作….：P@Mrchief显示函数使SPAN像预期的那样可见。@每当每次链接都被调用时，警报就会被触发。为什么在这种情况下，你认为<代码> SPAN >代码>是非语义的？请记住，

img

元素是一个被替换的、自然成列的元素，因此可以有效地包含在

span

（成列元素）中。如果有大量图像，那么列表可能更具语义…因为它是一个内联元素，我会说图像链接是分开的，因为有很多图像链接，并且跨度没有包装在任何其他块元素中。好的，将跨度更改为div是有效的。另外，感谢您现在对代码进行了更干净的重构。请阅读您的编辑，是的，在这种情况下，我会说列表是一个更好的选择，但跨度感觉不合适。鉴于发布的代码，我建议使用

ul

或

ol

更合适，但我不相信在这种情况下，

span

不是语义。显然，这是非常主观的，尽管（我当然不反对这种意见分歧的投票…），它已经在一份文件中准备好了。我想我应该把它包括在代码示例中