使用js简单实现了tree树菜单


Posted in Javascript onNovember 20, 2013
<!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=utf-8" /> 
<title>tree</title> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
.node ul{ 
margin-left:20px; 
} 
.node .node{ 
display:none; 
} 
.node .tree{ 
height:24px; 
line-height:24px; 
} 
.ce_ceng_close{ 
background:url(images/cd_zd1.png) left center no-repeat; 
padding-left: 15px; 
} 
.ce_ceng_open{ 
background:url(images/cd_zd.png) left center no-repeat; 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
</head> <body> 
<div class="cd_zj_l"> 

<div class="cd_title">目录导航</div> 
<div class="cv_fcv node"> 
<div class="tree">哲学、宗教</div> 
<ul class="node"> 
<li> 
<div class="tree">哲学伦理</div> 
<ul class="node"> 
<li> 
<div class="tree">马克思主义哲学</div> 
<div class="tree">马克思主义哲学</div> 
<div class="tree">马克思主义哲学</div> 
<div class="tree">马克思主义哲学</div> 
</li> 
<div style="clear:both"></div> 
</ul> 
</li> 
<div style="clear:both"></div> 
</ul> 
<div class="tree">哲学、宗教</div> 
<ul class="node"> 
<li> 
<div class="tree">哲学伦理</div> 
<ul class="node"> 
<li> 
<div class="tree">马克思主义哲学</div> 
<div class="tree">马克思主义哲学</div> 
<div class="tree">马克思主义哲学</div> 
<div class="tree">马克思主义哲学</div> 
</li> 
</ul> 
</li> 
</ul> 
</div> 
</div> 
<script type="text/javascript"> 
$(".tree").each(function(index, element) { 
if($(this).next(".node").length>0){ 
$(this).addClass("ce_ceng_close"); 
} 
}); 
$(".tree").click(function(e){ 
var ul = $(this).next(".node"); 
if(ul.css("display")=="none"){ 
ul.slideDown(); 
$(this).addClass("ce_ceng_open"); 
ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); 
}else{ 
ul.slideUp(); 
$(this).removeClass("ce_ceng_open"); 
ul.find(".node").slideUp(); 
ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); 
} 
}); 
</script> 
</body> 
</html>

使用js简单实现了树菜单!相信自己你一定可以实现的更好!

实现的效果图
使用js简单实现了tree树菜单

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
jQuery 浮动广告实现代码
Dec 25 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
js实现秒表计时器
Dec 16 Javascript
js 用CreateElement动态创建标签示例
Nov 20 #Javascript
JS实现字体选色板实例代码
Nov 20 #Javascript
jquery实现树形二级菜单实例代码
Nov 20 #Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 #Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
js中的布尔运算符使用介绍
Nov 20 #Javascript
浅析hasOwnProperty方法的应用
Nov 20 #Javascript
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
常用python编程模板汇总
2016/02/12 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
简单的命令查看安装的python版本号
2020/08/28 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
元旦联欢会感言
2014/03/04 职场文书
植树节标语
2014/06/27 职场文书
中小学生学籍证明
2014/10/25 职场文书
社区综治工作汇报
2014/10/27 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
python requests模块的使用示例
2021/04/07 Python
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript