超轻量级的基于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判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
javascript基本类型详解
Nov 28 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Django 再谈一谈json序列化
2020/03/16 Python
如何在Python对Excel进行读取
2020/06/04 Python
python 基于wx实现音乐播放
2020/11/24 Python
高三生物教学反思
2014/01/25 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
无房证明样本
2015/06/17 职场文书
网络研修心得体会
2016/01/08 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript