为什么这在火狐中不起作用,我尝试选择类别,然后使子类别可见。
<script type="text/javascript">
function show_sub(cat) {
var cat = document.getElementById("cat");
var sub = cat.getElementsByName("sub");
sub[0].style.display='inline';
}
</script>
-
<ul>
<li id="cat" onclick="show_sub(this)">
Top 1
<ul style="display:none" name="sub">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Top 2</li>
<li>Top 3</li>
<li>Top 4</li>
</ul>
编辑答案是:
<script type="text/javascript">
function show_sub(cat) {
cat.getElementsByTagName("ul")[0].style.display = (cat.getElementsByTagName("ul")[0].style.display == "none") ? "inline" : "none";
}
</script>
UL 没有名称属性,但您可以通过标记名称引用 UL。
尝试将脚本中的第 3 行替换为以下内容:
var sub = cat.getElementsByTagName("UL");
我建议做类似的事情:
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);
};
JS小提琴演示。
尽管上述依赖于使用class
而不是等于sub
的name
属性。
至于为什么你的原始版本"不起作用"(我必须补充一点,不是对问题的特别有用的描述),我只能建议,在 Chromium 中,JavaScript 控制台报告:
未捕获的类型错误:对象 # 没有方法"getElementsByName"。
解决旧IE系列限制的一种方法是使用自定义函数来模拟getElementsByClassName()
,尽管很粗糙:
function eBCN(elem,classN){
if (!elem || !classN){
return false;
}
else {
var children = elem.childNodes;
for (var i=0,len=children.length;i<len;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<len;i++){
listElems[i].onclick = function(){
show_sub(this.id);
};
}
JS小提琴演示。
试试这个:
function show_sub(cat) {
var parent = 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);
};
并将其用于IE6和7
if (typeof document.getElementsByClassName!='function') {
document.getElementsByClassName = function() {
var elms = document.getElementsByTagName('*');
var ei = new Array();
for (i=0;i<elms.length;i++) {
if (elms[i].getAttribute('class')) {
ecl = elms[i].getAttribute('class').split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
} else if (elms[i].className) {
ecl = elms[i].className.split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
}
}
return ei;
}
}