Firefox browser not support menu (click to display)

Question

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!

possible duplicate of [document.all vs. document.getElementById](http://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid) — mplungjan, Aug 06 '13 at 07:04

score 4 · Answer 1 · answered Aug 06 '13 at 06:58

4

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').

answered Aug 06 '13 at 06:58

Quentin

914,110
126
1,211
1,335

There's a question on stackoverflow that talks about this: http://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid – franzlorenzon Aug 06 '13 at 07:03

score 1 · Answer 2 · edited May 23 '14 at 23:14

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>

score 0 · Answer 3 · edited Aug 06 '13 at 07:12

0

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

edited Aug 06 '13 at 07:12

Rohan Kumar

40,431
11
76
106

answered Aug 06 '13 at 06:58

HMR

37,593
24
91
160

1

`document.getElementById(id).style.display = document.getElementById(id).style.display =="block"?"none":"block"` – mplungjan Aug 06 '13 at 07:05

score 0 · Answer 4 · answered Aug 06 '13 at 07:07

0

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

answered Aug 06 '13 at 07:07

Firefox browser not support menu (click to display)

4 Answers4