<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
li{ margin:5px 0; }
</style>

</head>

<body style="background:#ccc;">
<div id="menu" style="width:240px; background:#fff;">
 <ul>
     <li><span>第一级第一个</span></li>
        <li><span>第一级第二个</span>
            <ul>
            <li><span>第二级第一个</span></li>
            <li><span>第二级第二个</span></li>
            <li><span>第二级第三个</span>
             <ul>
                    <li><span>第三级第一个</span></li>
                    <li><span>第三级第二个</span></li>
                    <li><span>第三级第三个</span></li>
                    <li><span>第三级第四个</span></li>
                </ul>
           
            </li>
            <li><span>第二级第四个</span></li>
            </ul>
       
        </li>
        <li><span>第一级第三个</span></li>
        <li><span>第一级第四个</span>
         <ul>
                <li><span>第二级第一个</span></li>
                <li><span>第二级第二个</span></li>
                <li><span>第二级第三个</span></li>
                <li><span>第二级第四个</span></li>
            </ul>
       
        </li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript" src="DOM.js"></script>
<script type="text/ecmascript">
//如果有下一级菜单，则green，如果是终极 blue

var menu=document.getElementById('menu');
var oLis=document.getElementsByTagName('li');

for(var i=0;i<oLis.length;i++){
 var oLi=oLis.item(i);
 var oSpan=DOM.children(oLi,'span')[0];
 var aUl=DOM.children(oLi,'ul');
  if(aUl.length){//为true，表示它有下一级菜单
   aUl[0].style.display="none";   
   oSpan.style.backgroundColor="green";   
  }else{
   oSpan.style.backgroundColor="#09f";
  }
}

menu.onclick=function(e){
 e=e||window.event;
 var t=e.target||e.srcElement;
 if(t.nodeName!='SPAN') return;
 var next=DOM.siblings(t)[0] ;
 //Math
 if(next){
  if(next.style.display=="none"){
   next.style.display="block";
  }else{
   next.style.display="none";
   var oUls=next.getElementsByTagName('ul');
   for(var i=0;i<oUls.length;i++){    
    oUls[i].style.display="none";
   }
  }
 } 
}

</script>

var DOM={};//命名空间，起分类的作用。单例模式
BOM={};

DOM.children=function (parent,nodeName){
 console.log(arguments.callee.caller)//
 var a=[];
 var childNodes=parent.childNodes; 
 for(var i=0;i<childNodes.length;i++){
  var child=childNodes[i];
 if(typeof nodeName=="undefined"&&child.nodeType==1||typeof nodeName=="string"&&child.nodeName==nodeName.toUpperCase()){
  a.push(child)
 }
 }
 return a;
}

DOM.siblings=function (ele){ 
 var a=[]; 
 for(var p=ele.previousSibling;p;p=p.previousSibling){
  if(p.nodeType==1){
   
   a.unshift(p); 
  }  
 } 
 var n=ele.nextSibling;
 while(n){
  if(n.nodeType==1){
   a.push(n);   
  }
  n=n.nextSibling;  
 }
 return a;
}

DOM.getIndex=function(ele){
 var nIndex=0;
 var p=ele.previousSibling;
 while(p){
  if(p.nodeType==1){
   nIndex++
  }
  p=p.previousSibling;
  
 }
 return nIndex;
}

DOM.getElesByClass=function (strClass,context){

function byClassName(strClass,eles){
  var reg=new RegExp("file://b%22+strclass+%22//b");
  var a=[];
  for(var i=0;i<eles.length;i++){
   var ele=eles[i];
   if(reg.test(ele.className)){a.push(ele); } 
  } 
  return a; 
 }

context=context||document;
 if(context.getElementsByClassName){
  return context.getElementsByClassName(strClass); 
  
 }
 strClass=strClass.replace(/^ +| +$/g,"");
 var aClass=strClass.split(/ +/);
 var eles=context.getElementsByTagName("*");  
 for(var i=0;i<aClass.length;i++){  
  eles=byClassName(aClass[i],eles);  
 } 
 return eles; 
}

DOM.addClass=function(ele,strClass){ 
 var reg=new RegExp("file://b%22+strclass+%22//b");
 if(!reg.test(ele.className))
  ele.className+=" "+strClass; 
}
DOM.removeClass=function(ele,strClass){ 
 var reg=new RegExp("file://b%22+strclass+%22//b%22,%22g");
 ele.className=ele.className.replace(reg,"");
}

三级菜单---zhufeng的更多相关文章

  1. python学习笔记（字符串操作、字典操作、三级菜单实例）

    字符串操作 name = "alex" print(name.capitalize()) #首字母大写 name = "my name is alex" pri ...

  2. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  3. python成长之路-----day1-----作业（登录程序和三级菜单）

    作业: 作业1:用户登录 1)程序说明: a.用户输入密码验证成功然后打印欢迎信息 b.如果密码错误,用户登录失败,提示用户,密码错误 c.用户输入密码错误3次,则用户锁定 d.当用户多次输入不存在的 ...

  4. Python之路 day2 字典练习题之 三级菜单

    #Author:ersa ''' 程序: 三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 ''' menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{ ...

  5. python3 三级菜单

    python版本3.5 功能: 1.程序执行显示一级菜单,输入内容进入二级菜单: 2.进入二级菜单后,输入二级菜单内容,进入三级菜单:输入b返回一级菜单: 3.进入三级菜单后,输入b返回二级菜单. # ...

  6. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  7. day1作业--三级菜单

    作业概述: 写一个三级菜单 实现如下功能: (1)可依次选择进入各子菜单 (2)在每一级按“b”都可以返回上一级,按“q"都可以退出 流程图: readme: 简介: three_menu. ...

  8. python打怪之路【第三篇】：利用Python实现三级菜单

    程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...

  9. Python字典实现三级菜单

    ################################################ # Task Name: 三级菜单 # # Description:打印省.市.县三级菜单 # # 可 ...

随机推荐

  1. HDU 3065 病毒侵袭持续中

    HDU 3065 病毒侵袭持续中 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. XAF应用开发教程(一) 创建项目

    XAF是DevExpress公司的快速开发框架,全称eXpress Application Framework,是企业信息系统的开发利器,快速开发效果显著,在.net框架中,笔者至今没有找到一款可以与 ...

  3. shell script针对参数已经有配置好变量名称

    /path/to/scriptname opt1 opt2 opt3 opt4 $ $ $ $ $ 这样够清楚了吧?运行的脚本档名为 $0 这个变量,第一个接的参数就是 $1 啊- 所以,只要我们在 ...

  4. iOS - Threads 多线程

    1.Threads 1.1 进程 进程是指在系统中正在运行的一个应用程序.每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 比如同时打开 QQ.Xcode,系统就会分别启动两个进程. ...

  5. iOS - UISearchController

    前言 NS_CLASS_DEPRECATED_IOS(3_0, 8_0, "UISearchDisplayController has been replaced with UISearch ...

  6. sessionKey

    许多人都知道NETSCAPE公司是Internet商业中领先技术的提供者,该公司提供了一种基于RSA和保密密钥的应用于因特网的技术,被称为安全插座层(Secure Sockets Layer,SSL) ...

  7. 高并发简单解决方案————redis队列缓存+mysql 批量入库(ThinkPhP)

    问题分析 问题一:要求日志最好入库:但是,直接入库mysql确实扛不住,批量入库没有问题,done.[批量入库和直接入库性能差异] 问题二:批量入库就需要有高并发的消息队列,决定采用redis lis ...

  8. [转载] iptables配置实践

    原文: http://wsgzao.github.io/post/iptables/ iptables配置实践 By wsgzao 发表于 2015-07-24 文章目录 1. 前言 2. 更新历史 ...

  9. html5 drap & drop

    小知识点记录一下:onselectstart,onselect 1.onselectstart 该js方法是用来控制盒中内容是否被允许选中 <head> <style> #tm ...

  10. 线程高级应用-心得7-java5线程并发库中阻塞队列Condition的应用及案例分析

    1.阻塞队列知识点 阻塞队列重要的有以下几个方法,具体用法可以参考帮助文档:区别说的很清楚,第一个种方法不阻塞直接抛异常:第二种方法是boolean型的,阻塞返回flase:第三种方法直接阻塞. 2. ...