接着刚才的JS控制菜单！

Question

// 全兼容可高亮二级缓冲折叠菜单
// 作者：冰极峰 biny
// 博客：冰极峰博客:http://www.cnblogs.com/binyong/
// Email:[email protected]
// 日期：2010-05-27/*根据类名获得对象--引用自好友司徒正美*/
function getElementsByClassName(searchClass, node,tag){  
if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}
else{        
node = node || document;        
tag = tag || "*";        
var classes = searchClass.split(" "),        
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),        
patterns = [],         
returnElements = [],        
current,         
match;        
var i = classes.length;       
while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}        
var j = elements.length;       
while(--j >= 0){            
current = elements[j];           
match = false;            
for(var k=0, kl=patterns.length; k<kl; k++){                
match = patterns[k].test(current.className);                
if (!match)  break;           
} 
if (match)  returnElements.push(current);        
}        
return returnElements;   
} 
}/*通用加载函数，页面中如果要用到onload函数在窗体一加载时就执行的代码，可以直接添加到这个函数，否则会引起多个onload函数的执行冲突
  带参数的调用方法：addLoadEvent(new Function("refurFrame('单词管理');"));
*/
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}/*判断是否有className的函数，调用例子为：o.className=o.addClass(o,"normal");*/
function hasClass(element, className) {  
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');     
return element.className.match(reg); 
} 
/*动态添加className的函数，调用例子为：addClass(document.getElementById("test"), "test");*/
function addClass(element, className) {  
if (!this.hasClass(element, className)){   
element.className += " "+className;/*如果有多个样式叠加，则用这种方式，如class="style1 style2"*/
/*element.className = className; */ 
} 
}  
/*动态删除className的函数，调用例子为：removeClass(document.getElementById("test"), "test") */
function removeClass(element, className) {     
if (hasClass(element, className)){ 
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');         
element.className = element.className.replace(reg,' ');     
} 
} 
/*获取第一个子节点的函数，兼容FF*/
function getFirstChild(obj){
var firstDIV;
for (i=0; i<obj.childNodes.length; i++){
if (obj.childNodes[i].nodeType==1){
firstDIV=obj.childNodes[i];
return firstDIV;
}
else 
continue;
}
}/*页面加载执行函数*/
function loadmenu()
{
   var li = document.getElementById("menu").children;
        window.onload = function(){
            for(var i=0;i<li.length;i++){
                li[i].children(1).style.display="none";
                li[i].onclick=function(){
                    for(i=0;i<li.length;i++){
                        li[i].children(1).style.display="none";
                    }
                    this.children(1).style.display="block";
                }
            }
            li[0].children(1).style.display="block";
        }      
   }addLoadEvent(new Function("loadmenu();"));addLoadEvent(new Function("hovermenu('level1','level2','hove','cur');"));
//menu代表菜单总的ID名称
//level1代表一级菜单项的父容器，level2代表二级菜单项的父容器，
//后面的三个参数style1,style2,style3分别代表鼠标移入，移出，点击的三态样式名
addLoadEvent(new Function("submenu('level2','hove1','hove1');"));/*滑动显隐菜单列表*/
var temp;
var temp1;
function hovermenu(cssName1,cssName2,style2,style3){ 
    var ArrLinks=getElementsByClassName(cssName1);//一级菜单父容器的数组
var ArrLevel = new Array();//第一级菜单的数组
for(var i=0;i<ArrLinks.length;i++){
var curobj= getFirstChild(ArrLinks[i]);//获得第一个子对象

ArrLevel.push(curobj);
}
    var ArrDivs=getElementsByClassName(cssName2);//二级菜单的父容器数组，要显示的二级菜单容器
    for(var i=0;i<ArrLinks.length;i++){        
        var obj=getFirstChild(ArrLinks[i]);//获得第一个子对象
        obj.index=i
        obj.onmouseover= function(){overme(this,ArrLevel,style2,temp)};           
        obj.onmouseout=function(){outme(this,ArrLevel,style2,temp)};
obj.onclick=function(){clickme(this,ArrLinks,ArrDivs,style2,style3,temp)};
obj.onfocus=function(){this.blur()};//去掉虚线框
    }    
}
//二级菜单绑定事件
function submenu(cssName2,style2,style3){ 
    var ArrLinks=getElementsByClassName(cssName2);//一级菜单父容器的数组
var ArrLevel = new Array();//第一级菜单的数组
for(var i=0;i<ArrLinks.length;i++){
var sublinks= ArrLinks[i].getElementsByTagName('A');//获得第一个子对象
for(var m=0;m<sublinks.length;m++){
ArrLevel.push(sublinks[m]);
}   
}
    for(var i=0;i<ArrLevel.length;i++){        
        var obj=ArrLevel[i];
        obj.index=i
        obj.onmouseover= function(){overme(this,ArrLevel,style2,temp1)};           
        obj.onmouseout=function(){outme(this,ArrLevel,style2,temp1)};
obj.onclick=function(){subclick(this,ArrLevel,style2,style3,temp1)};
obj.onfocus=function(){this.blur()};//去掉虚线框
    }    
}
function overme(o,links,style2,state){
if (state!=o.index){     
addClass(o,style2);
    }
}
function outme(o,links,style2,state){
if (state!=o.index){
removeClass(o,style2);     
};
}
//一级菜单点击事件
function clickme(o,links,divs,style2,style3,state){
//要判断是否有子菜单项
var objUl=links[o.index].getElementsByTagName('UL');
var subNum=objUl.length;//是否有二级菜单，0为无，大于0为有;
if (state!=o.index){
    for(var i=0;i<divs.length;i++){ 
    if(subNum>0){//如果存在二级菜单项，即隐藏它
divs[i].style.display="none";
//closeObj(divs[i]);
}
    }
    if(subNum>0){//如果存在二级菜单项，显示当前点击的二级菜单
      objUl[0].style.display="block";
  showObj(objUl[0]);
}
        temp=o.index;
    }
for(var i=0;i<links.length;i++){
var curobj= getFirstChild(links[i]);//获得第一个子对象     
removeClass(curobj,style3);
removeClass(curobj,style2);
}
addClass(o,style3);
}
//二级菜单点击事件
function subclick(o,links,style2,style3,state){
if (state!=o.index){
for(var i=0;i<links.length;i++){
removeClass(links[i],style2);
}
temp1=o.index;
    addClass(o,style2);
}
}//缓冲显示
var flag=0;
function showObj(obj){
var allhight;
allhight=obj.getElementsByTagName("li").length*26;//26为每个菜单项的高度，用来计算二级菜单的总高度。
   obj.style.height="1px";   
   var changeW=function(){   
  var obj_h=parseInt(obj.style.height);
  if(obj_h<=allhight){ 
obj.style.height=(obj_h+Math.ceil((allhight-obj_h)/10))+"px";
  }
  else{ 
  clearInterval(bw1);
  }
   }       
   bw1= setInterval(changeW,40);//时间开关
   if(flag>0){
 clearInterval(bw2);
   }
}
//缓冲关闭
function closeObj(obj){
   flag++;       
   var closeDiv=function(){      
  clearInterval(bw1);
  var obj_h=parseInt(obj.style.height);
  if(obj_h>1){ 
 obj.style.height=(obj_h-Math.ceil(obj_h)/100)+"px";
  }
  else{
  clearInterval(bw2);
  obj.style.display="none";
  }
   }         
  bw2= setInterval(closeDiv,1);
  //alert(flag)
}
//鼠标经过指定的tr时切换该tr的样式
function hover_tr(tr, className)
            {
                if(className) tr.className = className;
                else tr.className = "hover_tr";
            }            

Answer 1

页面端[code=HTML]<%@ Page Language="C#" AutoEventWireup="true" CodeFile="left.aspx.cs" Inherits="Admin_Test" %><!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 id="Head1" runat="server">
    <link href="../css/menu.css" rel="Stylesheet" type="text/css" />
     <script src="../Include/js/menu.js" type="text/javascript" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="box">
    <ul class="menu" id="menu">
        <li class="level1" runat="server" id="menu1"><a href="javascript:void(0)">数据管理</a>
            <ul class="level2">
                <li><a href="TerminalList.aspx" target="main">终端列表</a></li>
                <li><a href="MerchantList.aspx" target="main">商家列表</a> </li>
                <li><a href="UserList.aspx" target="main">用户列表</a></li>
                <li><a href="NoticeList.aspx" target="main">公告列表</a></li>
                <li><a href="CardTypeList.aspx" target="main">卡类型列表</a></li>
                <li><a href="PaperTypeList.aspx" target="main">纸类型列表</a></li>
                <li><a href="QuestionList.aspx" target="main">调查问卷问题列表</a></li>
                <li><a href="AnswerList.aspx" target="main">调查问卷答案列表</a></li>
                <li><a href="UserLogList.aspx" target="main">运维日志</a></li>
                <li><a href="MerTypeList.aspx" target="main">商家父类型列表</a></li>
                <li><a href="SubMerTypeList.aspx" target="main">商家子类型列表</a></li>
                <li><a href="AdvertiseList.aspx" target="main">广告列表</a></li>
                <li><a href="TaskList.aspx" target="main">任务列表</a></li>
                <li><a href="VersionList.aspx" target="main">版本列表</a></li>
            </ul>
        </li>
        <li class="level1" id="menu2" runat="server"><a href="javascript:void(0)">程序管理</a>
            <ul class="level2">
                <li><a href="CustShowList.aspx" target="main">个性化显示列表</a></li>
                <li><a href="TerTypeList.aspx" target="main">终端类型列表</a></li>
                <li><a href="AppUpload.aspx" target="main">程序上传</a></li>
            </ul>
        </li>
        <li class="level1" id="menu3" runat="server"><a href="javascript:void(0)">打印数据管理</a>
            <ul class="level2">
                <li><a href="PrintData.aspx" target="main">按商家优惠券查询</a></li>
                <li><a href="PrintDataTer.aspx" target="main">按终端点位查询</a></li>
                <li><a href="PrintDataMerTotal.aspx" target="main">按商家总量查询</a></li>
            </ul>
        </li>
        <li class="level1" id="menu4" runat="server"><a href="javascript:void(0)">系统管理</a>
            <ul class="level2">
                <li><a href="LoginList.aspx" target="main">管理员列表</a></li>
                <li><a href="LoginEdit.aspx" target="main">新增管理员</a></li>
            </ul>
        </li>
    </ul>   <%-- <script type="text/javascript">
       var li = document.getElementById("menu").children;
        window.onload = function(){
            for(var i=0;i<li.length;i++){
                li[i].children(1).style.display="none";
                li[i].onclick=function(){
                    for(i=0;i<li.length;i++){
                        li[i].children(1).style.display="none";
                    }
                    this.children(1).style.display="block";
                }
            }
            li[0].children(1).style.display="block";
        }
    </script>--%>
</div>
    </form>
</body>
</html>[/code]

Answer 2

CSS是刚才发的
现在修改那个JS文件，实现只展开一级菜单！

Answer 3

//就只改了js其他都是你那些内容
// 全兼容可高亮二级缓冲折叠菜单
// 作者：冰极峰 biny
// 博客：冰极峰博客:http://www.cnblogs.com/binyong/
// Email:[email protected]
// 日期：2010-05-27/*根据类名获得对象--引用自好友司徒正美*/
function getElementsByClassName(searchClass, node,tag){  
    if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}
    else{        
        node = node || document;        
        tag = tag || "*";        
        var classes = searchClass.split(" "),        
        elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),        
        patterns = [],         
        returnElements = [],        
        current,         
        match;        
        var i = classes.length;       
        while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}        
        var j = elements.length;       
        while(--j >= 0){            
            current = elements[j];           
            match = false;            
            for(var k=0, kl=patterns.length; k<kl; k++){                
                match = patterns[k].test(current.className);                
                if (!match)  break;           
            } 
            if (match)  returnElements.push(current);        
        }        
        return returnElements;   
    } 
}/*通用加载函数，页面中如果要用到onload函数在窗体一加载时就执行的代码，可以直接添加到这个函数，否则会引起多个onload函数的执行冲突
  带参数的调用方法：addLoadEvent(new Function("refurFrame('单词管理');"));
*/
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;    
    }
    else{
        window.onload=function(){
            oldonload();
            func();
        }    
    }
}/*判断是否有className的函数，调用例子为：o.className=o.addClass(o,"normal");*/
function hasClass(element, className) {  
    var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');     
    return element.className.match(reg); 
} 
/*动态添加className的函数，调用例子为：addClass(document.getElementById("test"), "test");*/
function addClass(element, className) {  
    if (!this.hasClass(element, className)){   
        element.className += " "+className;/*如果有多个样式叠加，则用这种方式，如class="style1 style2"*/
        /*element.className = className; */ 
    } 
}  
/*动态删除className的函数，调用例子为：removeClass(document.getElementById("test"), "test") */
function removeClass(element, className) {     
    if (hasClass(element, className)){ 
        var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');         
        element.className = element.className.replace(reg,' ');     
    } 
} 
/*获取第一个子节点的函数，兼容FF*/
function getFirstChild(obj){
    var firstDIV;
    for (i=0; i<obj.childNodes.length; i++){
        if (obj.childNodes[i].nodeType==1){
            firstDIV=obj.childNodes[i];
            return firstDIV;
        }
        else 
            continue;
    }
}/*页面加载执行函数*/
function loadmenu()
{
   var li = document.getElementById("menu").children;
   for(var i=0;i<li.length;i++){
       li[i].children(1).style.display="none";
       li[i].onclick=function(){
           for(i=0;i<li.length;i++){
               li[i].children(1).style.display="none";
           }
           this.children(1).style.display="block";
       }
   }
   li[0].children(1).style.display="block";
}addLoadEvent(new Function("loadmenu();"));
//loadmenu();
addLoadEvent(new Function("hovermenu('level1','level2','hove','cur');"));
//menu代表菜单总的ID名称
//level1代表一级菜单项的父容器，level2代表二级菜单项的父容器，
//后面的三个参数style1,style2,style3分别代表鼠标移入，移出，点击的三态样式名
addLoadEvent(new Function("submenu('level2','hove1','hove1');"));/*滑动显隐菜单列表*/
var temp;
var temp1;
function hovermenu(cssName1,cssName2,style2,style3){ 
    var ArrLinks=getElementsByClassName(cssName1);//一级菜单父容器的数组
    var ArrLevel = new Array();//第一级菜单的数组
    for(var i=0;i<ArrLinks.length;i++){
        var curobj= getFirstChild(ArrLinks[i]);//获得第一个子对象
        
        ArrLevel.push(curobj);    
    }
    var ArrDivs=getElementsByClassName(cssName2);//二级菜单的父容器数组，要显示的二级菜单容器
    for(var i=0;i<ArrLinks.length;i++){        
        var obj=getFirstChild(ArrLinks[i]);//获得第一个子对象
        obj.index=i
        obj.onmouseover= function(){overme(this,ArrLevel,style2,temp)};           
        obj.onmouseout=function(){outme(this,ArrLevel,style2,temp)};
        obj.onclick=function(){clickme(this,ArrLinks,ArrDivs,style2,style3,temp)};
        obj.onfocus=function(){this.blur()};//去掉虚线框
    }    
}
//二级菜单绑定事件
function submenu(cssName2,style2,style3){ 
    var ArrLinks=getElementsByClassName(cssName2);//一级菜单父容器的数组
    var ArrLevel = new Array();//第一级菜单的数组
    for(var i=0;i<ArrLinks.length;i++){
        var sublinks= ArrLinks[i].getElementsByTagName('A');//获得第一个子对象
        for(var m=0;m<sublinks.length;m++){
            ArrLevel.push(sublinks[m]);
        }           
    }    
    for(var i=0;i<ArrLevel.length;i++){        
        var obj=ArrLevel[i];
        obj.index=i
        obj.onmouseover= function(){overme(this,ArrLevel,style2,temp1)};           
        obj.onmouseout=function(){outme(this,ArrLevel,style2,temp1)};
        obj.onclick=function(){subclick(this,ArrLevel,style2,style3,temp1)};
        obj.onfocus=function(){this.blur()};//去掉虚线框
    }    
}
function overme(o,links,style2,state){
    if (state!=o.index){        
        addClass(o,style2);                        
    }
}
function outme(o,links,style2,state){
    if (state!=o.index){
        removeClass(o,style2);                        
    };
}
//一级菜单点击事件
function clickme(o,links,divs,style2,style3,state){
    //要判断是否有子菜单项
    var objUl=links[o.index].getElementsByTagName('UL');
    var subNum=objUl.length;//是否有二级菜单，0为无，大于0为有;
    if (state!=o.index){        
        for(var i=0;i<divs.length;i++){ 
            if(subNum>0){//如果存在二级菜单项，即隐藏它
                divs[i].style.display="none";
                //closeObj(divs[i]);
            }                                            
        }        
        if(subNum>0){//如果存在二级菜单项，显示当前点击的二级菜单
          objUl[0].style.display="block";
          showObj(objUl[0]);
        }        
        temp=o.index;
    }    
    for(var i=0;i<links.length;i++){
        var curobj= getFirstChild(links[i]);//获得第一个子对象                    
        removeClass(curobj,style3);
        removeClass(curobj,style2);
    }                                
    addClass(o,style3);
}
//二级菜单点击事件
function subclick(o,links,style2,style3,state){
    if (state!=o.index){
        for(var i=0;i<links.length;i++){
            removeClass(links[i],style2);    
        }
        temp1=o.index;        
        addClass(o,style2);    
    }
}//缓冲显示
var flag=0;
function showObj(obj){
    var allhight;
    allhight=obj.getElementsByTagName("li").length*26;//26为每个菜单项的高度，用来计算二级菜单的总高度。
   obj.style.height="1px";   
   var changeW=function(){              
      var obj_h=parseInt(obj.style.height);
      if(obj_h<=allhight){ 
        obj.style.height=(obj_h+Math.ceil((allhight-obj_h)/10))+"px";
      }
      else{ 
      clearInterval(bw1);
      }
   }       
   bw1= setInterval(changeW,40);//时间开关
   if(flag>0){
     clearInterval(bw2);
   }
}
//缓冲关闭
function closeObj(obj){    
   flag++;       
   var closeDiv=function(){                
      clearInterval(bw1);
      var obj_h=parseInt(obj.style.height);
      if(obj_h>1){ 
             obj.style.height=(obj_h-Math.ceil(obj_h)/100)+"px";
      }
      else{
      clearInterval(bw2);
      obj.style.display="none";
      }
   }         
  bw2= setInterval(closeDiv,1);
  //alert(flag)
}
//鼠标经过指定的tr时切换该tr的样式
function hover_tr(tr, className)
            {
                if(className) tr.className = className;
                else tr.className = "hover_tr";
            }            

Answer 4

//改了这个方法
function loadmenu()
{
   var li = document.getElementById("menu").children;
   for(var i=0;i<li.length;i++){
       li[i].children(1).style.display="none";
       li[i].onclick=function(){
           for(i=0;i<li.length;i++){
               li[i].children(1).style.display="none";
           }
           this.children(1).style.display="block";
       }
   }
   li[0].children(1).style.display="block";
}