超轻量级的基于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代码效果
Aug 17 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
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
php flush类输出缓冲剖析
2008/10/19 PHP
php 获取完整url地址
2008/12/20 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
如何使用php输出时间格式
2013/08/31 PHP
获取URL文件名后缀
2013/10/24 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python监控文件或目录变化
2016/06/07 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
django列表筛选功能的实现代码
2020/03/27 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
python中PyQuery库用法分享
2021/01/15 Python
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
运动会稿件300字
2014/02/14 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL