使用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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
vue渲染方式render和template的区别
Jun 05 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
php foreach、while性能比较
2009/10/15 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
javascript每日必学之继承
2016/02/23 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
python实现中文转换url编码的方法
2016/06/14 Python
浅谈Django的缓存机制
2018/08/23 Python
Python函数装饰器实现方法详解
2018/12/22 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
教师个人总结范文
2015/02/11 职场文书
务工证明怎么写
2015/06/18 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers