<!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" />
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>站长特效 实用js+css多级树形展开效果导航菜单 站长特效网</title>
<style type="text/css">
body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}
ul,li,{margin:0;padding:0;}
ul{list-style:none;}
#menu_zzjs_net{margin:10px;width:200px;overflow:hidden;}
#menu_zzjs_net li{line-height:25px;}
#menu_zzjs_net .rem{padding-left:16px;}
#menu_zzjs_net .add{background:url(/img/tree_20110125zzjs_net.gif) -4px -31px no-repeat;}
#menu_zzjs_net .ren{background:url(/img/tree_20110125zzjs_net.gif) -4px -7px no-repeat;}
#menu_zzjs_net li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());}
#menu_zzjs_net li input{vertical-align:middle;margin-left:5px;}
#menu_zzjs_net .two{padding-left:20px;display:none;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<ul id="menu_zzjs_net">
<li>
<label><a href="javascript:;">站长特效一级菜单</a></label>
<ul class="two">
<li>
<label><a href="javascript:;">站长特效二级菜单</a></label>
<ul class="two">
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">站长特效三级菜单</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效四级</a></label></li>
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">站长特效四级</a></label>
<ul class="two">
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">站长特效五级</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">六级菜单</a></label></li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">六级菜单</a></label></li>
</ul>
</li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效五级</a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<label><a href="javascript:;">站长特效二级菜单</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效三级菜单</a></label></li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效三级菜单</a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript" >
function addEvent(el,name,fn){//绑定事件
if(el.addEventListener) return el.addEventListener(name,fn,false);
return el.attachEvent('on'+name,fn);
}//欢迎来到z站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function nextnode(node){//寻找下一个兄弟并剔除空的文本节点
if(!node)return ;
if(node.nodeType == 1)
return node;
if(node.nextSibling)
return nextnode(node.nextSibling);
}
function prevnode(node){//寻找上一个兄弟并剔除空的文本节点
if(!node)return ;
if(node.nodeType == 1)
return node;
if(node.previousSibling)
return prevnode(node.previousSibling);
}//欢迎来到站长z特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function parcheck(self,checked){//递归寻找父亲元素，并找到input元素进行操作
var par = prevnode(self.parentNode.parentNode.parentNode.previousSibling),parspar;
if(par&&par.getElementsByTagName('input')[0]){
par.getElementsByTagName('input')[0].checked = checked;
parcheck(par.getElementsByTagName('input')[0],sibcheck(par.getElementsByTagName('input')[0]));
}
}//欢迎来到站长特效z网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function sibcheck(self){//判断兄弟节点是否已经全部选中
var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0;
for(var i=0;i<sbi.length;i++){
if(sbi[i].nodeType != 1)//由于孩子结点中包括空的文本节点，所以这里累计长度的时候也要算上去
n++;
else if(sbi[i].getElementsByTagName('input')[0].checked)
n++;
}
return n==sbi.length?true:false;
}
addEvent(document.getElementById('menu_zzjs_net'),'click',function(e){//绑定input点击事件，使用menu_zzjs_net根元素代理
e = e||window.event;
var target = e.target||e.srcElement;
var tp = nextnode(target.parentNode.nextSibling);
switch(target.nodeName){
case 'A'://点击A标签展开和收缩树形目录，并改变其样式会选中checkbox
if(tp&&tp.nodeName == 'UL'){
if(tp.style.display != 'block' ){
tp.style.display = 'block';
prevnode(target.parentNode.previousSibling).className = 'ren'
}else{
tp.style.display = 'none';
prevnode(target.parentNode.previousSibling).className = 'add'
}
}
break;
case 'SPAN'://点击图标只展开或者收缩
var ap = nextnode(nextnode(target.nextSibling).nextSibling);
if(ap.style.display != 'block' ){
ap.style.display = 'block';
target.className = 'ren'
}else{
ap.style.display = 'none';
target.className = 'add'
}
break;
case 'INPUT'://点击checkbox，父亲元素选中，则孩子节点中的checkbox也同时选中，孩子结点取消父元素随之取消
if(target.checked){
if(tp){
var checkbox = tp.getElementsByTagName('input');
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked = true;
}
}else{
if(tp){
var checkbox = tp.getElementsByTagName('input');
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked = false;
}
}
parcheck(target,sibcheck(target));//当孩子结点取消选中的时候调用该方法递归其父节点的checkbox逐一取消选中
break;
}
});
window.onload = function(){//页面加载时给有孩子结点的元素动态添加图标
var labels = document.getElementById('menu_zzjs_net').getElementsByTagName('label');
for(var i=0;i<labels.length;i++){
var span = document.createElement('span');
span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;';
span.innerHTML = ' '
span.className = 'add';
if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL')
labels[i].parentNode.insertBefore(span,labels[i]);
else
labels[i].className = 'rem'
}
}//欢迎来到站长特效网，我们的网址是 z www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
</script>
</body>
</html>

实用js+css多级树形展开效果导航菜单的更多相关文章

  1. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  3. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  4. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  5. 纯css实现的三级水平导航菜单

    vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 <html> <head> <meta charset="UTF-8" ...

  6. js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...

  7. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  8. 纯js+css实现loading等待效果

    此插件是基于jqueryUI的widget,下面是具体实现代码 第一部分css: /***loading***/ .loading-box{ position:absolute; text-align ...

  9. 纯HTML+CSS带说明的黄色导航菜单

    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航 在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件 ...

随机推荐

  1. MyEclipse — Maven+Spring+Struts+Hibernate 整合 [学习笔记-2]

    引入Spring 修改 pox.xml 文件 添加jar包引用 <!-- spring3 --> <dependency> <groupId>org.springf ...

  2. HBase使用场景和成功案例

    1 典型互联网搜索问题:BigTable发明的原因 搜索使用场景 1) 爬虫持续不断地抓取新页面,这些页面每页一行地存储到HBase里. 2 )MapReduce计算作业运行在整张表上,生成索引,为网 ...

  3. QT visual stuido 集成插件不能打开ui文件的解决方法（去掉xml的UTF8标记）

    QT visual stuido 集成插件不能打开ui文件的解决方法 visual studio里不能打开这个ui文件,出现warning等解决方法是:于是将<?xml version=&quo ...

  4. QListWidget特别简单，但有两种添加item的方式

    虽然特别简单,但是对于小白来说,还是有必要过一下脑子和眼睛,当然还得过手(江湖传言:眼过千变,不如手过一遍),所以记录在此: #include "tablewidgetxxx.h" ...

  5. 屏幕实战效果解析：IPS/TFT/AMOLED/SLCD

    现在手机市场上,智能手机种类繁多,手机屏幕材质也是五花八门.对于一般消费者来说,一款手机是否值得购买,除了关心它的硬件参数以外,更重要的一点就是看它的屏幕.除了屏幕尺寸以外,影响着大家对该手机的第一感 ...

  6. 源码深度解析SpringMvc请求运行机制（转）

    源码深度解析SpringMvc请求运行机制 本文依赖的是springmvc4.0.5.RELEASE,通过源码深度解析了解springMvc的请求运行机制.通过源码我们可以知道从客户端发送一个URL请 ...

  7. Linux Java 环境变量设置

    对整个机器:所有用户 1,在/etc/profile 文件末尾加入 export JAVA_HOME=/var/opt/jdk1.7.0_04 export PATH=$JAVA_HOME/bin:$ ...

  8. Support Library(4)ecliplse导入支援包的方法

    准备工作 下载支援包到本地.在 <sdk>/android-sdks/extras/android/support/v7 下包含两个目录「 m2repository,support  」 ...

  9. BZOJ 1452 Count（二维树状数组）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1452 题意:给出一个数字矩阵(矩阵中任何时候的数字均为[1,100]),两种操作:(1) ...

  10. ORACLE EBS R12 - 寄售功能知多少

    材料以寄售方式供应,是制造业实现零库存管理的一种方式.东西放在我这里,不用的时候,东西还是供应商的,用的时候,按"装机"数量进行付款.这种业务模式,对于竞争日趋白热化的家电行业,非 ...