这段代码展示了如何使用JavaScript实现点击事件监听，并通过ID获取元素及类名查找子元素的功能。当点击某个ID为'cat'的元素时，会切换其子元素显示状态。在旧版IE中，由于不支持getElementsByClassName，故提供了一个简单的类名查找函数作为替代。
I'd suggest doing something similar to:
function show_sub(cat) {
if (!cat) {
return false;
}
else if (document.getElementById(cat)) {
var parent = document.getElementById(cat),
sub = parent.getElementsByClassName('sub');
if (sub[0].style.display == 'inline'){
sub[0].style.display = 'none';
}
else {
sub[0].style.display = 'inline';
}
}
}
document.getElementById('cat').onclick = function(){
show_sub(this.id);
};
Though the above relies on the use of a class rather than a name attribute equal to sub.
As to why your original version "didn't work" (not, I must add, a particularly useful description of the problem), all I can suggest is that, in Chromium, the JavaScript console reported that:
Uncaught TypeError: Object # has no method 'getElementsByName'.
One approach to working around the older-IE family's limitations is to use a custom function to emulate getElementsByClassName(), albeit crudely:
function eBCN(elem,classN){
if (!elem || !classN){
return false;
}
else {
var children = elem.childNodes;
for (var i=0,len=children.length;i
if (children[i].nodeType == 1
&&
children[i].className == classN){
var sub = children[i];
}
}
return sub;
}
}
function show_sub(cat) {
if (!cat) {
return false;
}
else if (document.getElementById(cat)) {
var parent = document.getElementById(cat),
sub = eBCN(parent,'sub');
if (sub.style.display == 'inline'){
sub.style.display = 'none';
}
else {
sub.style.display = 'inline';
}
}
}
var D = document,
listElems = D.getElementsByTagName('li');
for (var i=0,len=listElems.length;i
listElems[i].onclick = function(){
show_sub(this.id);
};
}
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
