以下源代码在IE正常但火狐不兼容望高手帮忙改正

<html>
<head>
<title>左侧隐藏菜单</title>
    <script language="JavaScript1.2" type="text/javascript">
      var maxmnus = 5
      function opTab(){
        var mnu = document.getElementById("menubar")
        var arrdiv = document.getElementById("arrow")
        var arrtxt = document.getElementById("arr")
        if((mnu.style.display != "block") || (mnu.style.display == "")){
          mnu.style.display = "block"
          arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2)
          arrtxt.innerText = "3";
        } else {
          mnu.style.display = "none"
          arrtxt.innerText = "4";
          arrdiv.style.pixelLeft = 0;
        }
        event.cancelBubble = true;
      }
      function toggleMenu(el){
        for(var i = 0;i < maxmnus;i++) document.getElementById(document.getElementById("c" + i).menu).style.display = "none";
        if(el.status == "closed"){
          el.status = "open"
          document.getElementById(el.menu).style.display = "block";
        } else {
          el.status = "closed"
        }
      }
      function toggleSub(e){
        el = document.getElementById(e)
        if(el.status == "closed"){
          el.style.display = "block";
          el.status = "open"
        } else {
          el.style.display = "none";
          el.status = "closed"
        }        
        event.cancelBubble = true;
      }
    </script>
<style type="text/css">
#menubar{
position:absolute;top:0px;left:0px;display:none;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:12px;cursor:hand;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');}
.indicator{
color:#b24426;font-family:Webdings;font-weight:bold;font-size:10px;}
 .r1{
position:relative;top:10px;left:5px;width:213px;color:#e7e8f1;border-left:#e7e8f1 2px outset;border-top:#e7e8f1 2px outset;border-right:#e7e8f1 2px outset;border-bottom:#e7e8f1 2px outset;/* http://www.codefans.net */padding-left:5px;padding-top:1px;adding-right:5px;padding-bottom:1px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');}
 .submenu1{
position:relative;top:0px;left:0px;height:95%;width:100%;border-left:#e0f8e3 2px inset;border-top:#e0f8e3 2px inset;border-right:#e0f8e3 2px inset;border-bottom:#e0f8e3 2px inset;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;display:none;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:12px;background-color:#cff1d4;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');}
  .submenu2{
position:relative;top:0px;left:0px;width:90%;border-left:#e0f8e3 3px groove;border-top:#e0f8e3 3px groove;border-right:#e0f8e3 3px groove;border-bottom:#e0f8e3 3px groove;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;margin-top:4px;display:none;background-color:#cff1d4;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');}
 .pulltab{
position:absolute;top:0px;left:0px;height:100%;width:20px;padding-left:2px;cursor:hand;color:#2644b2;font-family:Webdings;font-weight:bold;font-size:10px;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1', endColorstr='#2644b2');}
.inner{
height:100%;width:100%;}
.mtab{
position:relative;top:0px;
.btninner{
height:100%;width:100%;}
 .fr{
position:absolute;top:0px;left:30px;}
</style>
</head>
  <body scroll="no">
    <div id="menubar" style="HEIGHT: expression(document.body.offsetHeight); WIDTH: 223px">
      <div id="c0" class="r1" onclick="toggleMenu(this)" status="closed" menu="m0">
        <div id="cbtn" class="btninner">源码下载</div>
        <div class="mtab">
          <table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td onclick="opTab();">论坛社区</td></tr>
            <tr><td onclick="opTab();">交友会员</td></tr>
            <tr><td onclick="opTab();">聊天留言</td></tr>
         </table>
        </div>
      </div>
      <div id="c1" class="r1" onclick="toggleMenu(this)" status="closed" menu="m1">
        <div id="cbtn" class="btninner">产品及服务</div>
        <div>
          <table id="m1" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td onclick="opTab();">新闻</td></tr>
            <tr><td onclick="opTab();">产品</td></tr>
            <tr><td onclick="opTab();">服务</td></tr>
          </table>
        </div>
      </div>
      <div id="c2" class="r1" onclick="toggleMenu(this)" status="closed" menu="m2">
        <div id="cbtn" class="btninner">网页编程</div>
        <div>
          <table id="m2" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td>XML</td></tr>
            <tr><td>AJAX</td></tr>
            <tr><td>JQUERY</td></tr>
          </table>
        </div>
      </div>
      <div id="c3" class="r1" onclick="toggleMenu(this)" status="closed" menu="m3">
        <div id="cbtn" class="btninner">WEB开发</div>
        <div>
          <table id="m3" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td>ASP</td></tr>
            <tr><td>PHP</td></tr>
            <tr><td>JSP</td></tr>
          </table>
        </div>
      </div>
      <div id="c4" class="r1" onclick="toggleMenu(this)" status="closed" menu="m4">
        <div id="cbtn" class="btninner">演示</div>
        <div>
          <table id="m4" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td>MENU 1</td></tr>
            <tr><td>MENU 2</td></tr>
            <tr><td>MENU 3</td></tr>
          </table>
        </div>
      </div>
    </div>
    <div id="arrow" class="pulltab" onclick="opTab()"><table class="inner"><tr><td id="arr" valign="middle">4</td></tr></table></div>
    <div id="fr" name="fr" class="fr">
      <h2>左侧的变化菜单</h2>
    </div>
</body>
</html>

解决方案 »

  1.   

    pixelLeft
    标准用left注意单位px
    innerText需要检测用textContent
    cacelBubble=true需要使用e.stopPropagation()方法
    另个标准的需使用事件参数e另多情况请参考：http://blog.csdn.net/sohighthesky/archive/2009/04/11/4065873.aspx
      

  2.   

    非常感谢指点  不过cacelBubble=true需要使用e.stopPropagation()方法
    这个我不是很明白
      

  3.   

    主要是这段，其它的arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2) + “px” ;
      

  4.   

    问题很多，得注意FireFox和IE中事件处理方式的不同
    ff中不能直接使用Event对象，需要参数传递
    function opTab(event){

    }
    调用时
    onclick = “opTab(event);"ff中event没有keyCode要使用charCode样式中
    .mtab{
    position:relative;top:0px;
    .btninner{
    缺少一个结束大括号ff中不支持滤镜
    。
    楼主再自己调下吧，为FF装个firedebughttp://www.gold98.net/blog/article.asp?id=709
    这有些资料看看
      

  5.   

    FF不支持滤镜，CSS有错，所以背景不出
    FF中不支持event 对象，点击菜单项时"document.getElementById(document.getElementById("c" + i).menu).style.display = "none";" 报错，所有效果不出
      

  6.   

    太长了，发两次<html>
    <head>
        <title>左侧隐藏菜单</title>    <script language="JavaScript1.2" type="text/javascript">
            var maxmnus = 5
            function opTab(event)
            {
                var mnu = document.getElementById("menubar")
                var arrdiv = document.getElementById("arrow")
                var arrtxt = document.getElementById("arr")
                if ((mnu.style.display != "block") || (mnu.style.display == ""))
                {
                    mnu.style.display = "block"
                    arrdiv.style.left = mnu.offsetWidth + "px";
                                  
                    arrtxt.innerText = "3";
                } else
                {
                    mnu.style.display = "none"
                    arrtxt.innerText = "4";
                    arrdiv.style.left = 0;
                }
                event.cancelBubble = true;
            }
            function toggleMenu(el)
            {
                for (var i = 0; i < maxmnus; i++)
                {
                    var obj = document.getElementById("c" + i);
                 
                    document.getElementById(document.getElementById("c" + i).getAttribute("menu")).style.display = "none";
                }
                if (el.status == "closed")
                {
                    el.status = "open"
                    document.getElementById(el.getAttribute("menu")).style.display = "block";
                } else
                {
                    el.status = "closed"
                }
            }
            function toggleSub(e)
            {
                el = document.getElementById(e)
                if (el.status == "closed")
                {
                    el.style.display = "block";
                    el.status = "open"
                } else
                {
                    el.style.display = "none";
                    el.status = "closed"
                }
                event.cancelBubble = true;
            }
        </script>    <style type="text/css">
            #menubar
            {
                position: absolute;
                top: 0px;
                left: 0px;
                display: none;
                background-color: Blue;
                font-family: Verdana,Helvetica,Arial;
                font-weight: 700;
                font-size: 12px;
                cursor: hand;
                z-index: 5;
                background-image: url();
                background-repeat: repeat-y;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');
            }
            .indicator
            {
                color: #b24426;
                font-family: Webdings;
                font-weight: bold;
                font-size: 10px;
            }
            .r1
            {
                position: relative;
                top: 10px;
                left: 5px;
                width: 213px;
                color: #e7e8f1;
                border-left: #e7e8f1 2px outset;
                border-top: #e7e8f1 2px outset;
                border-right: #e7e8f1 2px outset;
                border-bottom: #e7e8f1 2px outset; /* http://www.codefans.net */
                padding-left: 5px;
                padding-top: 1px;
                padding-right: 5px;
                padding-bottom: 1px;
                background-image: url();
                background-repeat: repeat-y;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');
            }
            .submenu1
            {
                position: relative;
                top: 0px;
                left: 0px;
               
                width: 100%;
                border-left: #e0f8e3 2px inset;
                border-top: #e0f8e3 2px inset;
                border-right: #e0f8e3 2px inset;
                border-bottom: #e0f8e3 2px inset;
                padding-left: 3px;
                padding-top: 3px;
                padding-right: 3px;
                padding-bottom: 3px;
                display: none;
                color: #2644b2;
                font-family: Verdana,Helvetica,Arial;
                font-weight: 700;
                font-size: 12px;
                background-color: #cff1d4;
                background-image: url();
                background-repeat: repeat-y;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');
            }
            .submenu2
            {
                position: relative;
                top: 0px;
                left: 0px;
                width: 90%;
                border-left: #e0f8e3 3px groove;
                border-top: #e0f8e3 3px groove;
                border-right: #e0f8e3 3px groove;
                border-bottom: #e0f8e3 3px groove;
                padding-left: 3px;
                padding-top: 3px;
                padding-right: 3px;
                padding-bottom: 3px;
                margin-top: 4px;
                display: none;
                background-color: #cff1d4;
                color: #2644b2;
                font-family: Verdana,Helvetica,Arial;
                font-weight: 700;
                font-size: 10px;
                background-image: url();
                background-repeat: repeat-y;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');
            }
            .pulltab
            {
                position: absolute;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 20px;
                padding-left: 2px;
                cursor: hand;
                color: #2644b2;
                font-family: Webdings;
                font-weight: bold;
                font-size: 10px;
                z-index: 5;
                background-image: url();
                background-repeat: repeat-y;
                background-color:#666;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1', endColorstr='#2644b2');
            }
            .inner
            {
                height: 100%;
                width: 100%;
            }
            .mtab
            {
                position: relative;
                top: 0px;
            }
            .btninner
            {
              
                width: 100%;
            }
            .fr
            {
                position: absolute;
                top: 0px;
                left: 30px;
            }
        </style>
    </head>
    <body scroll="no">
        <div id="menubar" style="height: 100%; width: 223px">
            <div id="c0" class="r1" onclick="toggleMenu(this)" status="closed" menu="m0">
                <div id="cbtn" class="btninner">
                    源码下载</div>
                <div class="mtab">
                    <table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td onclick="opTab(event);">
                                论坛社区
                            </td>
                        </tr>
                        <tr>
                            <td onclick="opTab(event);">
                                交友会员
                            </td>
                        </tr>
                        <tr>
                            <td onclick="opTab(event);">
                                聊天留言
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="c1" class="r1" onclick="toggleMenu(this)" status="closed" menu="m1">
                <div id="cbtn" class="btninner">
                    产品及服务</div>
                <div>
                    <table id="m1" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td onclick="opTab(event);">
                                新闻
                            </td>
                        </tr>
                        <tr>
                            <td onclick="opTab(event);">
                                产品
                            </td>
                        </tr>
                        <tr>
                            <td onclick="opTab(event);">
                                服务
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="c2" class="r1" onclick="toggleMenu(this)" status="closed" menu="m2">
                <div id="cbtn" class="btninner">
                    网页编程</div>
                <div>
                    <table id="m2" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                XML
                            </td>
                        </tr>
                        <tr>
                            <td>
                                AJAX
                            </td>
                        </tr>
                        <tr>
                            <td>
                                JQUERY
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="c3" class="r1" onclick="toggleMenu(this)" status="closed" menu="m3">
                <div id="cbtn" class="btninner">
                    WEB开发</div>
                <div>
                    <table id="m3" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                ASP
                            </td>
                        </tr>
                        <tr>
                            <td>
                                PHP
                            </td>
                        </tr>
                        <tr>
                            <td>
                                JSP
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
      

  7.   

            <div id="c4" class="r1" onclick="toggleMenu(this)" status="closed" menu="m4">
                <div id="cbtn" class="btninner">
                    演示</div>
                <div>
                    <table id="m4" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                MENU 1
                            </td>
                        </tr>
                        <tr>
                            <td>
                                MENU 2
                            </td>
                        </tr>
                        <tr>
                            <td>
                                MENU 3
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div id="arrow" class="pulltab" onclick="opTab(event)">
            <table class="inner">
                <tr>
                    <td id="arr" valign="middle">
                        4
                    </td>
                </tr>
            </table>
        </div>
        <div id="fr" name="fr" class="fr">
            <h2>
                左侧的变化菜单</h2>
        </div>
    </body>
    </html>样式你可以再弄写背景，我的css不咋样
      

  8.   

    非常感谢guansong8079776