超轻量级的基于jquery的三级展开列表


Posted in Javascript onApril 26, 2011

这几天在公司的通用管理后台,使用的左右框架结构,点击左侧,右侧展开内容,项目中经常遇到左侧二级或者三级的情况,以前都是使用dtree,但是发现dtree ,样式及结构上不好控制 ,
如果是动态的数据,还要写到cs文件里面 输入字符,这样不利于维护,时间久了自己都找不清了。、
于是今天自己写了个轻量级的三级展开菜单,如果需要可以在增加一级别,一般公司的项目三级都足够了。

简介:
div部分无需自己定义class 及ID,只要是如下的结构就可以了,数据可以是动态 也可以是静态的
样式自己可以控制,修改符合自己的风格
超轻量级的基于jquery的三级展开列表
代码如下:
css

<style type="text/css"> 
*{ margin:0px; padding:0px;} 
a{ text-decoration:none; color:#000;} 
a:hover,a:linked{ color:#000;} 
#nav{ margin-left:20px; list-style:none; } 
#nav li,#nav li ul,#nav li ul li{ list-style:none;} 
#nav li a{ width:200px; height:30px; line-height:30px; background:#ccc; display:block; text-indent:10px;} 
#nav li ul li a{ background:#eaeaea;} 
#nav li ul li ul li a{ background:#fffff2;} 
</style>

js:
<script type="text/javascript"> 
//作者:loafinweb 
// 网址:www.cnblogs.com/clc2008 
$(function () { 
$("#nav ul").hide(); 
//控制一级子菜单 
$("#nav li a:first-child").click(function () { 
$(this).siblings().toggle(); 
}); 
//控制二级子菜单 
$("#nav li ul a:first-child").click(function () { 
$(this).siblings().find("ul").toggle(); 
}); 
}); 
</script>

div:
<body> 
<ul id="nav"> 
<li><a href="#">首页管理</a> 
<ul> 
<li><a href="#">+首页标题1</a> 
<ul> 
<li><a href="#">_首页标题1_1</a> </li> 
<li><a href="#">_首页标题1_2</a> </li> 
</ul> 
</li> 
<li><a href="#">首页标题2</a></li> 
<li><a href="#">首页标题3</a></li> 
</ul> 
</li> 
<li><a href="#">产品管理</a> 
<ul> 
<li><a href="#">产品标题1</a></li> 
<li><a href="#">产品标题2</a></li> 
<li><a href="#">产品标题3</a></li> 
</ul> 
</li> 
</ul> 
</body>

文件打包下载
Javascript 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
jqPlot 基于jquery的画图插件
Apr 26 #Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 #Javascript
jQuery 版元素拖拽原型代码
Apr 25 #Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 #Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 #Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 #Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 #Javascript
You might like
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
百度软件工程师职位
2013/02/14 面试题
班组长安全生产职责
2013/12/16 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
小学教师岗位职责
2015/04/02 职场文书
罗马假日观后感
2015/06/08 职场文书
少年犯观后感
2015/06/11 职场文书
初中美术教学反思
2016/02/17 职场文书
配置Kubernetes外网访问集群
2022/03/31 Servers
springboot实现string转json json里面带数组
2022/06/16 Java/Android