我有以下一行代码,在Firefox、Chrome和Safari中都能正常工作,但在internet explorer 8中就不行了。
<a href="javascript:void(0);" onclick="showHide('reading','type_r','r');">Show me the example</a>
该函数只是在点击超链接时显示和隐藏一个div。
我在这里有什么遗漏的地方吗?
这就是 showHide
函数。
function showHide(elementId,parentId,qtype) {
if (document.getElementById && !document.all) {
var elementParent = document.getElementById(parentId);
var element = document.getElementById(elementId);
var upArrowId = 'up-arrow-'+qtype;
var downArrowId = 'down-arrow-'+qtype;
if(element.style.visibility == 'hidden'){
elementParent.style.height = 'auto';
element.style.visibility = 'visible';
document.getElementById(upArrowId).style.visibility = 'visible';
document.getElementById(downArrowId).style.visibility = 'hidden';
}
else if(element.style.visibility == 'visible'){
element.style.visibility = 'hidden';
elementParent.style.height = '50px';
document.getElementById(upArrowId).style.visibility = 'hidden';
document.getElementById(downArrowId).style.visibility = 'visible';
}
}
}
!document.all
将IE从你的函数的代码执行中排除。
你的Javascript代码应该是这样的。
function showHide(elementId,parentId,qtype) {
var elementParent = document.getElementById(parentId);
var element = document.getElementById(elementId);
var upArrowId = 'up-arrow-'+qtype;
var downArrowId = 'down-arrow-'+qtype;
if(element.style.visibility == 'hidden'){
elementParent.style.height = 'auto';
element.style.visibility = '';
document.getElementById(upArrowId).style.visibility = '';
document.getElementById(downArrowId).style.visibility = 'hidden';
}
else if(element.style.visibility == ''){
element.style.visibility = 'hidden';
elementParent.style.height = '50px';
document.getElementById(upArrowId).style.visibility = 'hidden';
document.getElementById(downArrowId).style.visibility = '';
}
}
!document.all是为了让IE停止运行。另外,你不应该检查visibilty == 'visible',因为它一开始就不会工作。(默认值是"",所以你应该使用它,除非你已经明确地在元素上设置了可见性="可见")
但最重要的是--谷歌jQuery!在你意识到之前,你会用元素.toggle()代替所有这些。在你意识到这一点之前,你会用 element.toggle()来代替所有这些。