Question

我有一个网页，我认为曾经有太多的内容显示，所以我写了一些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>

编辑：忘了提我正在使用Jquery 1.6

Answer 1

这与你动画一个span元素的事实有关 - 不要问我为什么。但是如果你使用语义标记，你应该使用div来保存你的图像。我也重新考虑了你的代码，所以现在你只需要1个链接。

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

如果您不了解jQuery切换函数read this article，则其余代码只需对元素进行动画处理，然后根据当前状态更改链接文本。

Answer 2

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

这对我有用。

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

2 个答案: