超轻量级的基于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 相关文章推荐
浅析jQuery的链式调用之each函数
Dec 03 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
JS删除对象中某一属性案例详解
Sep 08 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微信发送推送消息乱码的解决方法
2019/02/28 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
党建工作先进材料
2014/05/02 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
通知范文怎么写
2015/04/16 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript