添加头行声明后在Firefox中无法正常运行效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>伸缩子菜单</title>
<style type="text/css">
body {font-family:"Courier New";}
ul,li{margin:0; padding:0;}
li {list-style-type:none;}
ul#tree {width:200px;}
ul#tree li.lv1 {background:#D5D7E6; height:30px; line-height:30px; padding:0 0 0 10px; border-bottom:1px solid #FFF; cursor:hand;}
ul#tree li.open ul {width:100%;}
ul#tree li.open ul li.lv2 {background:#E4FCF3; height:30px; line-height:30px; padding:0 0 0 10px; border-bottom:1px solid #FFF;}
</style>
</head><body>
<script language="javascript">
function openTree(id){
if(id.style.display == "none"){
id.style.display = "block";
} else {
id.style.display = "none"; 
}
}
</script>
<ul id="tree">
<li class="lv1" onmouseup="openTree(branch)">A</li>
<li class="open" id="branch" style="display:none">
<ul>
<li class="lv2">1</li>
<li class="lv2">2</li>
<li class="lv2">3</li>
<li class="lv2">4</li>
</ul>
</li>
</ul>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

解决方案 »

  1.   

    试试
    <script type="text/javascript">
      

  2.   


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

  3.   

    onmouseup="openTree(document.getElementById('branch'))"
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>伸缩子菜单</title>
    <style type="text/css">
    <!--
    body {font-family:"Courier New";}
    ul,li{margin:0; padding:0;}
    li {list-style-type:none;}
    ul#tree {width:200px;}
    ul#tree li.lv1 {background:#D5D7E6; height:30px; line-height:30px; padding:0 0 0 10px; border-bottom:1px solid #FFF; cursor:hand;}
    ul#tree li.open ul {width:100%;}
    ul#tree li.open ul li.lv2 {background:#E4FCF3; height:30px; line-height:30px; padding:0 0 0 10px; border-bottom:1px solid #FFF;}
    -->
    </style>
    </head>
    <body>
    <script language="javascript">
    <!--
    function openTree(id){
        if(id.style.display == "none"){
            id.style.display = "block";
        } else {
            id.style.display = "none"; 
        }
    }
    -->
    </script>
    <ul id="tree">
        <li class="lv1" onmouseup="openTree(document.getElementById('branch'))">A</li>
        <li class="open" id="branch" style="display:none">
            <ul>
                <li class="lv2">1</li>
                <li class="lv2">2</li>
                <li class="lv2">3</li>
                <li class="lv2">4</li>
            </ul>
        </li>
    </ul>
    </body>
    </html>