Question

我在我的网站上创建了菜单（树）。当用户单击该菜单时，它将显示另外两个菜单。它适用于除firefox浏览器之外的所有浏览器。谁能告诉我这是什么问题？

html代码

<li><a href="JavaScript:ok('tree1');">Sport</a></li>
<div id="tree1" style="display:none;">
    <li><a href="national_sport.php">National Sport</a></li>
    <li><a href="international_sport.php">International Sport</a></li>
</div>

javascript代码

function ok(id){
    if(document.all(id).style.display == "none") {
        document.all(id).style.display="block";
    }
    else{
        document.all(id).style.display="none";
    }
}

提前感谢！

Answer 1

document.all是IE4主义。它是非标准的，大约15年前由（广泛支持的）document.getElementById('id_of_element')替换。

Answer 2

有很多问题。

如前所述，document.all是不再需要的IE4 +特定代码
请不要使用javascript协议 - 除了一个之外，有很多理由没有，也没有任何优惠：状态会向用户显示链接是javascript
建议使用不显眼的脚本并将事件处理程序附加到脚本中的链接而不是内联。
您的HTML无效

因此，将我发表的评论转换为代码并不加引人注意地添加它

Live Demo

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload=function() {
  var links = document.getElementsByTagName("a");
  for (var i=0, n=links.length;i<n;i++) {
    if (links[i].id.indexOf("_link") !=-1) {
      links[i].onclick=function() {
        var id=this.id.split("_")[0]; // get the prefix
        var sub = document.getElementById(id);
        sub.style.display=sub.style.display=="block"?"none":"block";
        return false; // stop following the link
      }
    }
  }
}
</script>
</head>
<body>
<ul>
  <li><a id="tree1_link" href="#">Sport</a>
    <ul id="tree1" style="display:none">
      <li><a href="national_sport.php">National Sport</a></li>
      <li><a href="international_sport.php">International Sport</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Answer 3

function ok(id){
    if(document.getElementById(id).style.display == "none" ) {
        document.getElementById(id).style.display="block";
    }
    else{
        document.getElementById(id).style.display="none";
    } 
}

Answer 4

function ok(id){     
var div=document.getElementById(id)
div.style.display= (div.style.display=="block")? "none" : "block";
}

Firefox浏览器不支持菜单（点击显示）

4 个答案: