着急中：为什么有很多的树状菜单在 Linux 的浏览器 Mozilla 和 Firefox 下都展不开呢？（附源码）

谁有简单大的两层的树状菜单呀？大家共享一下吧！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="vbscript">
function change()
EventString=window.event.srcElement.id BodyString="Body_"&mid(EventString,4)
ImageString="ig_"&mid(EventString,4)
FoldString="fd_"&mid(EventString,4) if document.all(BodyString).style.display="none" then
document.all(BodyString).style.display=""
document.all(ImageString).src="images/minus.gif"
document.all(FoldString).src="images/openfolder.gif"
else
document.all(BodyString).style.display="none"
document.all(ImageString).src="images/plus.gif"
document.all(FoldString).src="images/folder.gif"
end if
end function
</script>
</head> <body>
<table cellspacing=0 cellpadding=0> <tr>
<td nowrap><img src="images/head.gif">多级菜单</td>
</tr>
</table> <div id="Body_0_1">
<table cellspacing=0 cellpadding=0><tr><td nowrap><img src=images/plus.gif id="ig_0_1_2" onclick=change()><img src=images/folder.gif id="fd_0_1_2" onclick=change()>AAAA</td></tr></table>
<div id="Body_0_1_2" style="display:none">
<table cellspacing=0 cellpadding=0><tr><td nowrap><img src=images/line1.gif><img src=images/plus.gif id="ig_0_1_2_4" onclick=change()><img src=images/folder.gif id="fd_0_1_2_4" onclick=change()><a href="Manage_Column.asp?ColumnID=4" target="main">aaaa</a></td></tr></table>
<div id="Body_0_1_2_4" style="display:none">
<table cellspacing=0 cellpadding=0><tr><td nowrap><img src=images/line1.gif><img src=images/line1.gif><img src=images/line2.gif><img src=images/folder.gif><a href="Manage_Column.asp?ColumnID=6" target="main">++++</a></td></tr></table>
<table cellspacing=0 cellpadding=0><tr><td nowrap><img src=images/line1.gif><img src=images/line1.gif><img src=images/line3.gif><img src=images/folder.gif><a href="Manage_Column.asp?ColumnID=7" target="main">++++</a></td></tr></table>
</div> <table cellspacing=0 cellpadding=0><tr><td nowrap><img src=images/line1.gif><img src=images/line3.gif><img src=images/folder.gif><a href="Manage_Column.asp?ColumnID=5" target="main">bbbb</a></td></tr></table>
</div> <table cellspacing=0 cellpadding=0><tr><td nowrap><img src=images/line3.gif><img src=images/folder.gif><a href="Manage_Column.asp?ColumnID=3" target="main">BBBB</a></td></tr></table>
</div> </body>
</html>

解决方案 »

  1.   

    document.getElementById() 获得对象不然不支持Firefox 你可以试试 http://www.meizz.com/Web/Article/211/436.htmCSDN上就是用的这个 梅花雪tree控件
      

  2.   

    说真的，对于‘梅花雪tree控件’我还没看懂...我现在只想要一个简单的两层树就行了，梅花雪tree控件太复杂了...
      

  3.   

    里面有些语法像all是ie特有的，你把特有的修改一下应该就可以了
      

  4.   

    all应该是ie特有的
    换乘document.getElementById("")呢
      

  5.   

    找个给你
    可能不象树 希望你满足你要求
    <!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>Div+CSS+JS树型菜单，可刷新</title>
    <meta name="description" content="http://www.NETAny.net">
    <style type="text/css">
    <!--
    *{margin:0;padding:0;border:0;}
    body {
        font-family: arial, 宋体, serif;
        font-size:12px;
    }
    #nav {
        width:180px;
        line-height: 24px; 
        list-style-type: none;
        text-align:left;
        /*定义整个ul菜单的行高和背景色*/
    }/*==================一级目录===================*/
    #nav a {
        width: 160px; 
        display: block;
        padding-left:20px;
        /*Width(一定要)，否则下面的Li会变形*/
    }#nav li {
        background:#CCC; /*一级目录的背景色*/
        border-bottom:#FFF 1px solid; /*下面的一条白边*/
        float:left;
        /*float：left,本不应该设置，但由于在Firefox不能正常显示
        继承Nav的width,限制宽度，li自动向下延伸*/
    }#nav li a:hover{
        background:#CC0000;    /*一级目录onMouseOver显示的背景色*/
    }#nav a:link  {
        color:#666; text-decoration:none;
    }
    #nav a:visited  {
        color:#666;text-decoration:none;
    }
    #nav a:hover  {
        color:#FFF;text-decoration:none;font-weight:bold;
    }/*==================二级目录===================*/
    #nav li ul {
        list-style:none;
        text-align:left;
    }
    #nav li ul li{    
        background: #EBEBEB; /*二级目录的背景色*/
    }#nav li ul a{
             padding-left:20px;
             width:160px;
        /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
    }/*下面是二级目录的链接样式*/#nav li ul a:link  {
        color:#666; text-decoration:none;
    }
    #nav li ul a:visited  {
        color:#666;text-decoration:none;
    }
    #nav li ul a:hover {
        color:#F3F3F3;
        text-decoration:none;
        font-weight:normal;
        background:#CC0000;
        /* 二级onmouseover的字体颜色、背景色*/
    }/*==============================*/
    #nav li:hover ul {
        left: auto;
    }
    #nav li.sfhover ul {
        left: auto;
    }
    #content {
        clear: left; 
    }
    #nav ul.collapsed {
        display: none;
    }
    -->#PARENT{
        width:300px;
        padding-left:20px;
    }
    </style>
    </head><body>
    <div id="PARENT">
    <ul id="nav">
    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的网站</a>
        <ul id="ChildMenu1" class="collapsed">
        <li><a href="http://www.netany.net" target="_blank">www.netany.net</a></li>
        <li><a href="http://www.netany.net" target="_blank">www.netany.net</a></li>
        <li><a href="http://www.netany.net" target="_blank">www.netany.net</a></li>
        </ul>
    </li>
    <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
        <ul id="ChildMenu2" class="collapsed">
        <a href="http://www.netany.net" target="_blank">支付</a></li>
        <li><a href="#">网上支付</a></li>
        <li><a href="#">登记汇款</a></li>
        <li><a href="#">在线招领</a></li>
        <li><a href="#">历史帐务</a></li>
        </ul>
    </li>
    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a>
        <ul id="ChildMenu3" class="collapsed">
        <li><a href="#">登录</a></li>
        <a href="http://www.netany.net" target="_blank">管理</a></li>
        <li><a href="#">管理</a></li>
        <li><a href="#">管理</a></li>
        </ul>
    </li>
    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>
        <ul id="ChildMenu4" class="collapsed">
        <li><a href="#">登录</a></li>
        <a href="http://www.netany.net" target="_blank">管理</a></li>
        <li><a href="#">管理</a></li>
        <li><a href="#">管理</a></li>
        </ul>
    </li>
    </ul>
    </div><div style="width:300;padding-left:30px;">
    </br></br>
    工作需要搞了一个菜单，分享给大家，大家一齐学习
    </br></br>
    <p>请大家支持:<a href="http://www.netany.net" target="_blank">http://www.netany.net</a></p>
    </div>
    </body>
    </html>
    <script type=text/javascript><!--
    var LastLeftID = "";function menuFix() {
        var obj = document.getElementById("Nav").getElementsByTagName("li");
        
        for (var i=0; i<obj.length; i++) {
            obj[i].onmouseover=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            obj[i].onMouseDown=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            obj[i].onMouseUp=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            obj[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
            }
        }
    }function DoMenu(emid)
    {
        var obj = document.getElementById(emid);    
        obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
        if((LastLeftID!="")&&(emid!=LastLeftID))    //关闭上一个Menu
        {
            document.getElementById(LastLeftID).className = "collapsed";
        }
        LastLeftID = emid;
    }function GetMenuID()
    {    var MenuID="";
        var _paramStr = new String(window.location.href);    var _sharpPos = _paramStr.indexOf("#");
        
        if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
        {
            _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
        }
        else
        {
            _paramStr = "";
        }
        
        if (_paramStr.length > 0)
        {
            var _paramArr = _paramStr.split("&");
            if (_paramArr.length>0)
            {
                var _paramKeyVal = _paramArr[0].split("=");
                if (_paramKeyVal.length>0)
                {
                    MenuID = _paramKeyVal[1];
                }
            }
            /*
            if (_paramArr.length>0)
            {
                var _arr = new Array(_paramArr.length);
            }
            
            //取所有#后面的，菜单只需用到Menu
            //for (var i = 0; i < _paramArr.length; i++)
            {
                var _paramKeyVal = _paramArr[i].split('=');
                
                if (_paramKeyVal.length>0)
                {
                    _arr[_paramKeyVal[0]] = _paramKeyVal[1];
                }        
            }
            */
        }
        
        if(MenuID!="")
        {
            DoMenu(MenuID)
        }
    }GetMenuID();    //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
    menuFix();
    --></script>
      

  6.   


    <html>
    <head>
    <script>
    function openDetail(obj){
    eventObj = event.srcElement;
    //alert(obj);
    if(obj.style.display=='block'){
    obj.style.display='none';
    eventObj.src='1';
    }
    else{
    obj.style.display='block';
    eventObj.src='2';
    }
    }
    </script>
    </head>
    <body>
    <img src="2" onclick="openDetail(display_1)"></img>
    <div id='display_1'>abc
      <img src="2" onclick="openDetail(display_2)"></img>
      <div id='display_2'>cde</div>
    </div>
    </body>
    </html>
    这样可以么？