三级菜单---zhufeng
<!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的更多相关文章
- python学习笔记（字符串操作、字典操作、三级菜单实例）
字符串操作 name = "alex" print(name.capitalize()) #首字母大写 name = "my name is alex" pri ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- python成长之路-----day1-----作业（登录程序和三级菜单）
作业: 作业1:用户登录 1)程序说明: a.用户输入密码验证成功然后打印欢迎信息 b.如果密码错误,用户登录失败,提示用户,密码错误 c.用户输入密码错误3次,则用户锁定 d.当用户多次输入不存在的 ...
- Python之路 day2 字典练习题之 三级菜单
#Author:ersa ''' 程序: 三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 ''' menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{ ...
- python3 三级菜单
python版本3.5 功能: 1.程序执行显示一级菜单,输入内容进入二级菜单: 2.进入二级菜单后,输入二级菜单内容,进入三级菜单:输入b返回一级菜单: 3.进入三级菜单后,输入b返回二级菜单. # ...
- 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- day1作业--三级菜单
作业概述: 写一个三级菜单 实现如下功能: (1)可依次选择进入各子菜单 (2)在每一级按“b”都可以返回上一级,按“q"都可以退出 流程图: readme: 简介: three_menu. ...
- python打怪之路【第三篇】：利用Python实现三级菜单
程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...
- Python字典实现三级菜单
################################################ # Task Name: 三级菜单 # # Description:打印省.市.县三级菜单 # # 可 ...
随机推荐
- CUBRID学习笔记 12防火墙设置 linux
这玩意是linux上用的. 如果你的数据库不是装在linux下可以飘过了 iptables -I INPUT -p tcp --dport 8001 -j ACCEPT iptables -I INP ...
- python strip()函数
转发:jihite-博客园-python strip()函数 函数原型 声明:s为字符串,rm为要删除的字符序列 s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的 ...
- MyEclipse + Tomcat 热部署问题
myEclipse设置对应的tomcat时,只需要在jdk的Optional Java VM arguments中添加如下设置: -Xms256m -Xmx512m-Dcom.sun.manageme ...
- winform打开唯一窗体、构造函数传值
制作登入窗体: 制作一个登陆窗体,实现点击按钮关闭此窗体并打开另一个窗体 直接在按钮点击事件中,实例化一个想要打开的窗体 使用show方法打开,并把登陆窗体的visible属性改为false Form ...
- Doragon Kuesuto 1.0
#include<stdio.h> #include<stdlib.h> #include<time.h> int main() { ; ; ; int actio ...
- js的事件处理程序
js事件处理程序一般有三种: 1.HTML事件处理程序 <body> <input type="button" value="点击" oncl ...
- surfaceview介绍
[1]surfaceview 控件是一个重量级控件 [2]内部维护了2个线程 A 获取数据 负责显示 B 负责显示 获取数据 [3]他可以直接在子线程更新ui ...
- [css] px em rem
一.区别 px是相对于显示器屏幕分辨率而言的. em相对于浏览器的默认字体尺寸. rem相对于HTML根元素. 二.使用 1.em 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: ...
- 【摘抄】meta系列用法总结【持续更新中】
meta标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). ★页面描述信息NAME变量 name是描述网页的,对应于Content(网页内容),以便于搜索引擎机器人 ...
- HTML5地理位置概述和地理位置对象的详解
一.地理位置 经度 : 南北极的连接线 纬度 : 东西连接的线 二.位置信息从何而来 IP地址 GPS全球定位系统 Wi-Fi无线网络 基站 三.地理位置对象(navi ...