请教一个关于浏览器兼容性问题，急！

我在MasterPage中做了一个竖向的可收缩的导航栏，在IE6下可以正常的收缩，但是在IE7下则无法实现收缩，不知道原因何在，急求解决办法！！
附代码如下：
<body>
  <ul id="nav">
     <li><a href="Welcome.aspx">返回首页</a></li>
     <li><a href="#" onmousedown="showSubMenu('SubMenu1');">单位管理</a>
         <ul id="SubMenu1">
             <li><a href="Main.aspx" >本单位信息</a></li>
             <li><a href="SubOrganInfo.aspx" >下级单位信息</a></li>
             <li><a href="CreateOrgan.aspx" >创建单位</a></li>
         </ul>
     </li>
     <li><a href="#" onmousedown="showSubMenu('SubMenu2');">人员管理</a>
         <ul id="SubMenu2">
             <li><a href="AdminInfo.aspx" >本人信息</a></li>
             <li><a href="PersonInfo.aspx" >人员信息管理</a></li>
             <li><a href="CreatePerson.aspx" >添加人员</a></li>
         </ul>
     </li>  </ul><script type="text/javascript">
var lastSubMenuID;
//记录最后点击的子菜单
function doRecord(subMenuID) 
{
  document.getElementById(subMenuID).style.display = "block";
  lastSubMenuID = subMenuID;
  return lastSubMenuID;
}
//隐藏子菜单
function hideLastSubMenu() 
{
   if(lastSubMenuID == undefined || lastSubMenuID == "") 
     {
         return;
     } 
   else 
     {
         var lastSubMenu = document.getElementById(lastSubMenuID);
         lastSubMenu.style.display = "none";
     }
}
//显示子菜单
function showSubMenu(subMenuID) 
{
    if(lastSubMenuID == subMenuID) 
       {
           if(document.getElementById(lastSubMenuID).style.display == "block") 
              {
                    document.getElementById(lastSubMenuID).style.display = "none";
                    return;
              }
       }
    if(lastSubMenuID == undefined) 
       {
           doRecord(subMenuID);
       }
    else
       {
           hideLastSubMenu();
           doRecord(subMenuID);
        }
    changeMenuState(subMenuID);
}
//改变子菜单的样式
function changeMenuState(subMenuID) 
{
     var subMenu = document.getElementById(subMenuID);
     subMenu.style.display = "block";
}
</script></body>

解决方案 »

  1.   

    加个style看看,ie7下测试好像可以的
    <ul id="SubMenu1" style="display:block"> 
    <ul id="SubMenu2" style="display:block">
      

  2.   

    undefined 应该加引号的吧 
      

  3.   

    加个style看看,ie7下测试好像可以的 
    <ul id="SubMenu1" style="display:block"> 
    <ul id="SubMenu2" style="display:block">
      

  4.   


    <!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>
    <script type="text/javascript"> 
    var lastSubMenuID=false; 
    //记录最后点击的子菜单 
    function doRecord(subMenuID) 
    { 
      document.getElementById(subMenuID).style.display = "block"; 
      lastSubMenuID = subMenuID; 
      return lastSubMenuID; 
    } 
    //隐藏子菜单 
    function hideLastSubMenu() 
    { 
      if(lastSubMenuID ==false || lastSubMenuID == "") 
        { 
            return; 
        } 
      else 
        { 
            var lastSubMenu = document.getElementById(lastSubMenuID); 
            lastSubMenu.style.display = "none"; 
        } 
    } 
    //显示子菜单 
    function showSubMenu(subMenuID) 
    { 
        if(lastSubMenuID == subMenuID) 
          { 
              if(document.getElementById(lastSubMenuID).style.display == "block") 
                  { 
                        document.getElementById(lastSubMenuID).style.display = "none"; 
                        return; 
                  } 
          } 
        if(lastSubMenuID == false) 
          { 
              doRecord(subMenuID); 
          } 
        else 
          { 
              hideLastSubMenu(); 
              doRecord(subMenuID); 
            } 
        changeMenuState(subMenuID); 
    } 
    //改变子菜单的样式 
    function changeMenuState(subMenuID) 
    { 
        var subMenu = document.getElementById(subMenuID); 
        subMenu.style.display = "block"; 
    } </script> 
    <style>
    #nav{
    }
    #nav li{
    float:left;
    width:100px;
    margin:0px;
    padding:0px;
    list-style:none;
    }
    </style>
    </head><body> 
      <ul id="nav"> 
        <li> <a href="Welcome.aspx">返回首页 </a> </li> 
        <li> <a href="#" onmousedown="showSubMenu('SubMenu1');">单位管理 </a> 
            <ul id="SubMenu1" style="display:none;"> 
                <li> <a href="Main.aspx" >本单位信息 </a> </li> 
                <li> <a href="SubOrganInfo.aspx" >下级单位信息 </a> </li> 
                <li> <a href="CreateOrgan.aspx" >创建单位 </a> </li> 
            </ul> 
        </li> 
        <li> <a href="#" onmousedown="showSubMenu('SubMenu2');">人员管理 </a> 
            <ul id="SubMenu2" style="display:none;"> 
                <li> <a href="AdminInfo.aspx" >本人信息 </a> </li> 
                <li> <a href="PersonInfo.aspx" >人员信息管理 </a> </li> 
                <li> <a href="CreatePerson.aspx" >添加人员 </a> </li> 
            </ul> 
        </li>   </ul> 
    </body>
    </html>
    加下，改了改
    没发现问题
      

  5.   

    呵呵
    跟undefined false "" 等比较的话, 最好用if(!lastSubMenuID)这样比较好.唉. 什么时候要是有人能点名向我提问就high了.
      

  6.   

    回复Chinmo：我用了你的代码，还是无法展开主菜单，不知道原因何在！！
      

  7.   

    上面的代码ie7，ie8都没有问题啊
      

  8.   

    我是完全拷贝下来的，但是导航是横向显示的，没有任何问题，但我想要竖向的导航。下面是我的CSS样式，以及我试验后的效果，请高手帮我指出问题究竟出在哪里吧，谢谢！
    <!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 runat="server">
        <title>无标题文档</title>
        <style type="text/css">
        body {
        
            background-color: White;
            margin:0;
            /*background-image: url(pics/beijing.png);*/
        }
        .frame {
            width : 99.9% ;
            border : 0px 0px; 
        }
        
        #left{
            background:#eeeeee;
        }
        
        #left ul{
            margin:0; 
            padding:0; 
            
        }
        
        #nav {
           margin:0;
           margin-left:3px;
           margin-top:10px;
           padding;0;
           
        }
        
        #nav li{
       
            margin:0;
            padding:0;
            list-style-type:none;
            text-align:center;
            height :30px;
            width:150px;
            background-image:url(pics/navi.gif); 
            border-bottom:#FFFFFF 5px solid; 
        }
        #nav ul{
            margin:0;
            padding:0;
            display:none;
        }
        li a
        {
            font-weight:bold;
            font-size:10pt;
            width:150px;
            color:#000000;
            line-height:20pt;
            text-decoration:none;
        }
        #nav li a:hover{
            color:#cc9933;
            font-weight:bold;    
        }
           
       #nav li ul{
            margin-top:0px;
            margin:0; 
            padding:0;
            list-style-type:none;
            background-color:#f0ffff; 
        }
        
           
        #nav li ul li{
        
            width:150px; 
            margin:0; 
            margin-top:3px;
            padding:0;                                                                                                                                                                                                                                                                                                                      
            font-weight:normal;
            background-image:none;
            background-color:#f0ffff; 
            border-bottom:#E2EDF8 3px solid; 
        }
        
         #nav li ul li a{
            font-weight:normal;
            color:#000000;    
        }
          
        #header {
            height : 120px;
            width:1024px;
            background-image : url(pics/Logo.gif) ;
            <%--border:#333333 1px solid;--%>
        }
        
        .link{
            margin:0;
            padding:0;    
        }
        
        #content {
            position: relaitive;
            margin:0 auto;
            text-align:left;  
            border-bottom-style:double;
            height:570px;
            <%--border:#333333 1px solid;--%>
              
        }
        #footer {
            font-size:14px;
            text-align: center;
            height:15px;
            
            display:block;
            
            <%--border:#333333 1px solid;--%>
        }
        
        #state a{
        text-decoration:none;
        color:#000000;
            }
        
        #state  a:hover{
            color:#cc9933;
            font-weight:bold; 
            text-decoration:underline; 
        }
                
    .STYLE1 {color: #FF0000}
        </style>
       
    </head>
      

  9.   

    <body>
    <ul id="nav">
    <li><a href="Welcome.aspx">返回首页</a></li>
    <li><a href="#"onmousedown="tt(this);">单位管理</a>
    <ul id="SubMenu1">
    <li><a href="Main.aspx">本单位信息</a></li>
    <li><a href="SubOrganInfo.aspx">下级单位信息</a></li>
    <li><a href="CreateOrgan.aspx">创建单位</a></li>
    </ul>
    </li>
    <li><a href="#"onmousedown="tt(this);">人员管理</a>
    <ul id="SubMenu2">
    <li><a href="AdminInfo.aspx">本人信息</a></li>
    <li><a href="PersonInfo.aspx">人员信息管理</a></li>
    <li><a href="CreatePerson.aspx">添加人员</a></li>
    </ul>
    </li></ul><script language="javascript">
    function tt(obj){
    var obj1=obj.parentNode;
    var objs=obj1.parentNode.childNodes;
    for(var i=0;i<objs.length;i++){
    var obj2=objs[i].childNodes[2];
    if(obj2&&obj2.nodeName=="UL"){
    if(objs[i]==obj1){
    if(obj2.style.display=="none"||obj2.style.display==""){
    obj2.style.display="block";
    }
    else{
    obj2.style.display="none";
    }
    }
    else{
    obj2.style.display="none";
    }
    }
    }
    }
    </script>
    </body>
      

  10.   

    <body>
    <ul id="nav">
    <li><a href="Welcome.aspx">返回首页</a></li>
    <li><a href="#"onmousedown="tt(this);">单位管理</a>
    <ul id="SubMenu1">
    <li><a href="Main.aspx">本单位信息</a></li>
    <li><a href="SubOrganInfo.aspx">下级单位信息</a></li>
    <li><a href="CreateOrgan.aspx">创建单位</a></li>
    </ul>
    </li>
    <li><a href="#"onmousedown="tt(this);">人员管理</a>
    <ul id="SubMenu2">
    <li><a href="AdminInfo.aspx">本人信息</a></li>
    <li><a href="PersonInfo.aspx">人员信息管理</a></li>
    <li><a href="CreatePerson.aspx">添加人员</a></li>
    </ul>
    </li></ul><script language="javascript">
    function tt(obj){
    var obj1=obj.parentNode;
    var objs=obj1.parentNode.childNodes;
    for(var i=0;i<objs.length;i++){
    var obj2=objs[i].childNodes[2];
    if(obj2&&obj2.nodeName=="UL"){
    if(objs[i]==obj1){
    if(obj2.style.display=="none"||obj2.style.display==""){
    obj2.style.display="block";
    }
    else{
    obj2.style.display="none";
    }
    }
    else{
    obj2.style.display="none";
    }
    }
    }
    }
    </script>
    </body>
      

  11.   

        #header { 
            height : 120px; 
            width:1024px; 
            background-image : url(pics/Logo.gif) ; 
            <%--border:#333333 1px solid;--%> 
        } 
    最下面一行是何用意！！？
      

  12.   

    <!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 runat="server"> 
        <title>无标题文档 </title> 
        <style type="text/css"> 
        body { 
        
            background-color: White; 
            margin:0; 
            /*background-image: url(pics/beijing.png);*/ 
        } 
        .frame { 
            width : 99.9% ; 
            border : 0px 0px; 
        } 
        
        #left{ 
            background:#eeeeee; 
        } 
        
        #left ul{ 
            margin:0; 
            padding:0; 
            
        } 
        
        #nav { 
          margin:0; 
          margin-left:3px; 
          margin-top:10px; 
          padding;0; 
          
        } 
        
        #nav li{ 
      
            margin:0; 
            padding:0; 
            list-style-type:none; 
            text-align:center; 
            height :30px; 
            width:150px; 
            background-image:url(pics/navi.gif); 
            border-bottom:#FFFFFF 5px solid; 
        } 
        #nav ul{ 
            margin:0; 
            padding:0; 
            display:none; 
        } 
        li a 
        { 
            font-weight:bold; 
            font-size:10pt; 
            width:150px; 
            color:#000000; 
            line-height:20pt; 
            text-decoration:none; 
        } 
        #nav li a:hover{ 
            color:#cc9933; 
            font-weight:bold;    
        } 
          
      #nav li ul{ 
            margin-top:0px; 
            margin:0; 
            padding:0; 
            list-style-type:none; 
            background-color:#f0ffff; 
        } 
        
          
        #nav li ul li{ 
        
            width:150px; 
            margin:0; 
            margin-top:3px; 
            padding:0;                                                                                                                                                                                                                                                                                                                      
            font-weight:normal; 
            background-image:none; 
            background-color:#f0ffff; 
            border-bottom:#E2EDF8 3px solid; 
        } 
        
        #nav li ul li a{ 
            font-weight:normal; 
            color:#000000;    
        } 
          
        #header { 
            height : 120px; 
            width:1024px; 
            background-image : url(pics/Logo.gif) ; 
            <%--border:#333333 1px solid;--%> 
        } 
        
        .link{ 
            margin:0; 
            padding:0;    
        } 
        
        #content { 
            position: relaitive; 
            margin:0 auto; 
            text-align:left;  
            border-bottom-style:double; 
            height:570px; 
            <%--border:#333333 1px solid;--%> 
              
        } 
        #footer { 
            font-size:14px; 
            text-align: center; 
            height:15px; 
            
            display:block; 
            
            <%--border:#333333 1px solid;--%> 
        } 
        
        #state a{ 
        text-decoration:none; 
        color:#000000; 
            } 
        
        #state  a:hover{ 
            color:#cc9933; 
            font-weight:bold; 
            text-decoration:underline; 
        } 
                
    .STYLE1 {color: #FF0000} 
        </style> 
      
    </head>
     
    <body> 
      <ul id="nav"> 
        <li> <a href="Welcome.aspx">返回首页 </a> </li> 
        <li> <a href="#" onmousedown="showSubMenu('SubMenu1');">单位管理 </a> 
            <ul id="SubMenu1"> 
                <li> <a href="Main.aspx" >本单位信息 </a> </li> 
                <li> <a href="SubOrganInfo.aspx" >下级单位信息 </a> </li> 
                <li> <a href="CreateOrgan.aspx" >创建单位 </a> </li> 
            </ul> 
        </li> 
        <li> <a href="#" onmousedown="showSubMenu('SubMenu2');">人员管理 </a> 
            <ul id="SubMenu2"> 
                <li> <a href="AdminInfo.aspx" >本人信息 </a> </li> 
                <li> <a href="PersonInfo.aspx" >人员信息管理 </a> </li> 
                <li> <a href="CreatePerson.aspx" >添加人员 </a> </li> 
            </ul> 
        </li> 
     
      </ul> 
     
    <script type="text/javascript"> 
    var lastSubMenuID; 
    //记录最后点击的子菜单 
    function doRecord(subMenuID) 
    { 
      document.getElementById(subMenuID).style.display = "block"; 
      lastSubMenuID = subMenuID; 
      return lastSubMenuID; 
    } 
    //隐藏子菜单 
    function hideLastSubMenu() 
    { 
      if(lastSubMenuID == undefined || lastSubMenuID == "") 
        { 
            return; 
        } 
      else 
        { 
            var lastSubMenu = document.getElementById(lastSubMenuID); 
            lastSubMenu.style.display = "none"; 
        } 
    } 
    //显示子菜单 
    function showSubMenu(subMenuID) 
    { 
        if(lastSubMenuID == subMenuID) 
          { 
              if(document.getElementById(lastSubMenuID).style.display == "block") 
                  { 
                        document.getElementById(lastSubMenuID).style.display = "none"; 
                        return; 
                  } 
          } 
        if(lastSubMenuID == undefined) 
          { 
              doRecord(subMenuID); 
          } 
        else 
          { 
              hideLastSubMenu(); 
              doRecord(subMenuID); 
            } 
        changeMenuState(subMenuID); 
    } 
    //改变子菜单的样式 
    function changeMenuState(subMenuID) 
    { 
        var subMenu = document.getElementById(subMenuID); 
        subMenu.style.display = "block"; 
    } 
    </script> 
     
    </body>
      

  13.   


    <!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 runat="server"> 
        <title>无标题文档 </title> 
        <style type="text/css"> 
        body { 
        
            background-color: White; 
            margin:0; 
            /*background-image: url(pics/beijing.png);*/ 
        } 
        .frame { 
            width : 99.9% ; 
            border : 0px 0px; 
        } 
        
        #left{ 
            background:#eeeeee; 
        } 
        
        #left ul{ 
            margin:0; 
            padding:0; 
            
        } 
        
        #nav { 
          margin:0; 
          margin-left:3px; 
          margin-top:10px; 
          padding;0; 
          
        } 
        
        #nav li{ 
      
            margin:0; 
            padding:0; 
            list-style-type:none; 
            text-align:center; 
            height :30px; 
            width:150px; 
            background-image:url(pics/navi.gif); 
            border-bottom:#FFFFFF 5px solid; 
        } 
        #nav ul{ 
            margin:0; 
            padding:0; 
            display:none; 
        } 
        li a 
        { 
            font-weight:bold; 
            font-size:10pt; 
            width:150px; 
            color:#000000; 
            line-height:20pt; 
            text-decoration:none; 
        } 
        #nav li a:hover{ 
            color:#cc9933; 
            font-weight:bold;    
        } 
          
      #nav li ul{ 
            margin-top:0px; 
            margin:0; 
            padding:0; 
            list-style-type:none; 
            background-color:#f0ffff; 
        } 
        
          
        #nav li ul li{ 
        
            width:150px; 
            margin:0; 
            margin-top:3px; 
            padding:0;                                                                                                                                                                                                                                                                                                                      
            font-weight:normal; 
            background-image:none; 
            background-color:#f0ffff; 
            border-bottom:#E2EDF8 3px solid; 
        } 
        
        #nav li ul li a{ 
            font-weight:normal; 
            color:#000000;    
        } 
          
        #header { 
            height : 120px; 
            width:1024px; 
            background-image : url(pics/Logo.gif) ; 
            <%--border:#333333 1px solid;--%> 
        } 
        
        .link{ 
            margin:0; 
            padding:0;    
        } 
        
        #content { 
            position: relaitive; 
            margin:0 auto; 
            text-align:left;  
            border-bottom-style:double; 
            height:570px; 
            <%--border:#333333 1px solid;--%> 
              
        } 
        #footer { 
            font-size:14px; 
            text-align: center; 
            height:15px; 
            
            display:block; 
            
            <%--border:#333333 1px solid;--%> 
        } 
        
        #state a{ 
        text-decoration:none; 
        color:#000000; 
            } 
        
        #state  a:hover{ 
            color:#cc9933; 
            font-weight:bold; 
            text-decoration:underline; 
        } 
                
    .STYLE1 {color: #FF0000} 
        </style> 
      
    </head>
     
    <body> 
      <ul id="nav"> 
        <li> <a href="Welcome.aspx">返回首页 </a> </li> 
        <li> <a href="#" onmousedown="showSubMenu('SubMenu1');">单位管理 </a> 
            <ul id="SubMenu1"> 
                <li> <a href="Main.aspx" >本单位信息 </a> </li> 
                <li> <a href="SubOrganInfo.aspx" >下级单位信息 </a> </li> 
                <li> <a href="CreateOrgan.aspx" >创建单位 </a> </li> 
            </ul> 
        </li> 
        <li> <a href="#" onmousedown="showSubMenu('SubMenu2');">人员管理 </a> 
            <ul id="SubMenu2"> 
                <li> <a href="AdminInfo.aspx" >本人信息 </a> </li> 
                <li> <a href="PersonInfo.aspx" >人员信息管理 </a> </li> 
                <li> <a href="CreatePerson.aspx" >添加人员 </a> </li> 
            </ul> 
        </li> 
     
      </ul> 
     
    <script type="text/javascript"> 
    var lastSubMenuID; 
    //记录最后点击的子菜单 
    function doRecord(subMenuID) 
    { 
      document.getElementById(subMenuID).style.display = "block"; 
      lastSubMenuID = subMenuID; 
      return lastSubMenuID; 
    } 
    //隐藏子菜单 
    function hideLastSubMenu() 
    { 
      if(lastSubMenuID == undefined || lastSubMenuID == "") 
        { 
            return; 
        } 
      else 
        { 
            var lastSubMenu = document.getElementById(lastSubMenuID); 
            lastSubMenu.style.display = "none"; 
        } 
    } 
    //显示子菜单 
    function showSubMenu(subMenuID) 
    { 
        if(lastSubMenuID == subMenuID) 
          { 
              if(document.getElementById(lastSubMenuID).style.display == "block") 
                  { 
                        document.getElementById(lastSubMenuID).style.display = "none"; 
                        return; 
                  } 
          } 
        if(lastSubMenuID == undefined) 
          { 
              doRecord(subMenuID); 
          } 
        else 
          { 
              hideLastSubMenu(); 
              doRecord(subMenuID); 
            } 
        changeMenuState(subMenuID); 
    } 
    //改变子菜单的样式 
    function changeMenuState(subMenuID) 
    { 
        var subMenu = document.getElementById(subMenuID); 
        subMenu.style.display = "block"; 
    } 
    </script> 
     
    </body>
      

  14.   

    if(lastSubMenuID == undefined) 你改下 if(lastSubMenuID == null)