CODEWITHSUNDEEP
javascripthtml
Sovat
Sovat

Reputation: 61

Firefox browser not support menu (click to display)

I created menu (tree) on my site. When user click on that menu, it will shows two more more menus. It worked on all browser except firefox browser. Can anyone tell me what is the problem?

html code

<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 code

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

Thank in advance!

Upvotes: 0

Views: 121

Answers (4)

mplungjan
mplungjan

Reputation: 177860

There are quite a few issues.

  • As already mentioned, document.all is IE4+ specific code no longer needed
  • Please do NOT use the javascript protocol - there are many reasons not to and none in its favour except one: the status will show the user that the link is javascript
  • it is recommended to use unobtrusive scripting and attach the event handlers to the links in the script instead of inline.
  • your HTML is not valid

So converting a comment I made to code and adding it unobtrusively I get

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>

Upvotes: 1

HMR
HMR

Reputation: 39270

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

Upvotes: 0

user2587132
user2587132

Reputation: 

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

Upvotes: 0

Quentin
Quentin

Reputation: 943516

document.all is an IE4-ism. It is non-standard and replaced about 15 years ago by (the widely supported) document.getElementById('id_of_element').

Upvotes: 4

Related Questions