<!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. C语言一些常用内存分配函数

    首先看个问题程序(这里用的是TC编译器): #include "stdlib.h" #include "stdio.h" void main() {    in ...

  2. BeanUtils.copyProperties与PropertyUtils.copyProperties用法及区别

    一.简介: BeanUtils提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行处理.我们知道,一个JavaBean 通常包含了大量的属性,很多情况下,对Jav ...

  3. SWD应用接口

    随着ARM公司对Cortex系列的推出,采样SWD方式调试成了大家的首选.SWD不仅速度可以与JTAG媲美,而且使用的调试线少得多.很多人在采样SWD方式进行调试时,一般都是采用4线: ① VCC   ...

  4. Photoshop:不起眼的背景橡皮擦

    背景橡皮擦工具是通过颜色的容差来进行工作的,“+”是定位点,当“+”光标位置在要擦除的位置上的时候,就能擦出比较好的效果. 取样连续:擦除的效果比较连续. 取样一次:不松开鼠标键,也不用担心“+”字中 ...

  5. MyBatis学习总结_10_批量操作

    一.mybatis中的批量操作    批量操作核心就是一次传入多个数据然后进行相关操作,增删改查中掌握其中一个其他的也不成问题 1.最新在做的短信平台,要批量插入群发的短信记录: 当然批量操作还有:批 ...

  6. Java:IO流之字符流缓冲区详解

    字符流缓冲区: 1.缓冲区的出现提高了对数据的读写效率: 2.对应类:BufferedWriter.BufferedReader: 3.缓冲区要结合流才可以使用: 4.在流的基础上对流的功能进行了增强 ...

  7. 模糊查询的like '%$name$%'的sql注入避免

    Ibatis like 查询防止SQL注入的方法 Ibatis like 查询防止SQL注入的方法 mysql: select * from tbl_school where school_name ...

  8. Mybatis SqlSessionTemplate 源码解析

    As you may already know, to use MyBatis with Spring you need at least an SqlSessionFactory and at le ...

  9. ES6入门之Symbol

    ES5对象属性名都是字符串容易造成属性名的冲突. eg:var a = { name: 'lucy'}; a.name = 'lili';这样就会重写属性 ES6引入了一种新的原始数据类型Symbol ...

  10. Backbone seajs

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...