js二级折叠菜单能够兼容多款浏览器

<!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>
<title>兼容可高亮带缓冲的二级折叠菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;text-align:center;}
a:link,a:visited{text-decoration:none;}
/*菜单个性设置*/
.box{width:204px;height:100%;margin:0 auto;height:100%;background:url(http://www.jzread.com/d/file/web/js/2010-05-29/3c93f3294e06ebbdd7b74fae4b73bf88.gif) repeat-y left top;}
.box ul{list-style:none;text-align:left;}
.box h2{width:204px;margin:0 auto;height:33px;background:#FFF url(http://www.jzread.com/d/file/web/js/2010-05-29/1d7ccf8a5080eb5ab5065cef5782d0bf.gif) no-repeat left top;text-indent:-9999px;}
/*一级菜单*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(http://www.jzread.com/d/file/web/js/2010-05-29/ea8c3efd14d53c42ea9737600b468dd9.gif) no-repeat left top;}
/*一级菜单两态样式,供JS调用*/
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
/*二级菜单*/
.menu li ul{padding-left:10px;}
.menu li ul.level2{width:180px;display:none;}
.menu li ul.level2 li{height:26px;line-height:26px;}
.menu li ul.level2 li a{display:block;height:26px;line-height:26px;background:#E7E3E7 url(http://www.jzread.com/d/file/web/js/2010-05-29/54d1d6dd56816663bade5828d82012b3.gif) no-repeat 30px center;padding-left:50px;color:#42556B;border-top:1px #B8C2CB solid;overflow:hidden;}
/*二级菜单两态样式,供JS调用*/
.menu li ul.level2 li a.hove1{background:#F6F6F6 url(http://www.jzread.com/d/file/web/js/2010-05-29/54d1d6dd56816663bade5828d82012b3.gif) no-repeat 30px center;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="box">
    <h2>全兼容可高亮带缓冲的二级折叠菜单</h2>
    <ul class="menu">
      <li class="level1"><a href="#none">管理首页</a></li>
      <li class="level1"><a href="#none">用户管理</a>
        <ul class="level2">
          <li><a href="#none">用户列表</a></li>
          <li><a href="#none">用户购卡申请</a></li>
          <li><a href="#none">用户课程变更情况</a></li>
        </ul>
      </li>
      <li class="level1"><a href="#none">课程管理</a>
        <ul class="level2">
          <li><a href="#none">课程列表</a></li>
          <li><a href="#none">添加课程</a></li>
          <li><a href="#none">添加模块或单元</a></li>
          <li><a href="#none">修改模块或单元</a></li>
        </ul>
      </li>
      <li class="level1"><a href="#none">基础数据管理</a>
        <ul class="level2">
          <li><a href="#none">学科管理</a></li>
          <li><a href="#none">系列管理</a></li>
          <li><a href="#none">学段管理</a></li>
          <li><a href="#none">年份管理</a></li>
        </ul>
      </li> 
      <li class="level1"><a href="#none">课程评论管理</a></li> 
      <li class="level1"><a href="#none">信息管理</a>
        <ul class="level2">
          <li><a href="#none">同步动态</a></li>
          <li><a href="#none">常见问题</a></li>
          <li><a href="#none">站内消息管理</a></li>     
        </ul>
      </li>
      <li class="level1"><a href="#none">数据统计</a>
        <ul class="level2">
          <li><a href="#none">总体统计</a></li>
          <li><a href="#none">课程销售统计</a></li>
          <li><a href="#none">课程学习统计</a></li>
          <li><a href="#none">课程按日期等统计</a></li>
          <li><a href="#none">课程按小时统计</a></li>    
        </ul>
      </li>
    </ul>
</div>
<script type="text/javascript">
/*根据类名获得对象--引用自好友司徒正美*/
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;
 }
}
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,20);//时间开关
   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)
}
</script>
</body>
</html>

时间： 2024-09-25 09:54:45

js二级折叠菜单能够兼容多款浏览器的相关文章

兼容多浏览器 高亮带缓冲的二级折叠菜单效果

全兼容可高亮带缓冲的二级折叠菜单 管理首页 用户管理 用户列表 用户购卡申请 用户课程变更情况 课程管理 课程列表 添加课程 添加模块或单元 修改模块或单元 基础数据管理 学科管理 系列管理 学段管理 年份管理 课程评论管理 信息管理 同步动态 常见问题 站内消息管理 数据统计 总体统计 课程销售统计 课程学习统计 课程按日期等统计 课程按小时统计

jQuery实现有动画淡出效果的二级折叠菜单代码_jquery

本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码.分享给大家供大家参考,具体如下: 这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更多的空间来修饰美化,想怎么弄就怎么弄了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-dh-flash-fade-in-out-2-menu-demo/ 具体代码如下: <!DOCTYPE html PU

js二级导航菜单代码

提示:您可以先修改部分代码再运行 js二级导航菜单代码 脚本说明: 把如下代码加入区域中 」JavaScript2000」」动画图库」」风景区」」Java Script」Java Applet」C G I」CGI?相关设定」免费资源」饭店资料」E-Mail 提示:您可以先修改部分代码再运行

js无限级折叠菜单精简版_导航菜单

无限级折叠菜单 1.0.1 JS版 菜单_1_1 菜单_2_1 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_2_2 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_1_2 菜单_2_1 菜

js 三级折叠菜单代码效果

提示:您可以先修改部分代码再运行 - 一级菜单A - 一级菜单A_1 一级菜单A_0 一级菜单A_1 一级菜单A_2 一级菜单A_3 一级菜单A_4 一级菜单A_5 一级菜单A_6 一级菜单A_7 一级菜单A_8 一级菜单A_9 - 一级菜单A_2 一级菜单A_0 一级菜单A_1 一级菜单A_2 一级菜单A_3 一级菜单A_4 一级菜单A_5 一级菜单A_6 一级菜单A_7 一级菜单A_8 一级菜单A_9 - 一级菜单A_3 一级菜单A_0 一级菜单A_1 一级菜单A_2 一级菜单A_3 一级菜

js 二级联动菜单

请选择雨花区工商局1天心区工商局2岳麓区工商局3开福区工商4局芙蓉区工商5局长沙工商局6长沙工商局7雨花区工商8局请选择

js 二级导航菜单代码

中国移动辽宁公司欢迎您! 首页 品牌 全球通 神州行 动感地带 集团客户 产品 语音通信 数据通信 通话优惠信息服务 G3服务专区 12580专区 国际/港澳台业务专区 最新动态 优惠与活动 移动公告 新闻动态 网上营业厅 全球通网厅 神州行网厅 动感地带网厅 集团客户网厅 移动商城 服务与支持 服务热点关注 跨区服务 服务渠道介绍 常用帮助信息软件下载 WLAN覆盖地区查询 关于辽宁移动 公司介绍 企业文化 广告形象 招聘信息 联系我们

js二级联动菜单

<script language="javascript"> <!-- var subcat = new Array(); subcat[0] = new Array('1','中国') subcat[1] = new Array('2','香港') function changeselect1(locationid) {         document.form1.bianhao.length = 0;                              /

css js 制作折叠菜单代码

LABEL 1 www.111cn.net 1 LABEL 2 www.111cn.net 2 www.111cn.net