超轻量级三级展开列表
这几天在公司的通用管理后台，使用的左右框架结构，点击左侧，右侧展开内容，项目中经常遇到左侧二级或者三级的情况，以前都是使用dtree,但是发现dtree ，样式及结构上不好控制 ，
如果是动态的数据，还要写到cs文件里面 输入字符，这样不利于维护，时间久了自己都找不清了。、
于是今天自己写了个轻量级的三级展开菜单，如果需要可以在增加一级别，一般公司的项目三级都足够了。
简介：
div部分无需自己定义class 及ID,只要是如下的结构就可以了，数据可以是动态 也可以是静态的
样式自己可以控制，修改符合自己的风格
代码如下：
css
View Code
*{ 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：
View Code
//作者：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：
View Code
<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>
轻量级三级折叠左侧菜单下载
转载于:https://www.cnblogs.com/clc2008/archive/2011/04/26/2028815.html
超轻量级三级展开列表相关推荐
- GitHub开源：17M超轻量级中文OCR模型、支持NCNN推理
目录 1.项目简介 2.项目配置 3.问题解决 1.项目简介 近期GitHub上一位大神开源了一个叫做chineseocr_lite的OCR的项目,这是一个超轻量级中文OCR,支持竖排文字识别.NCN ...
- 超轻量级中文OCR，支持竖排文字识别、ncnn推理，总模型仅17M
整理 | AI科技大本营 光学字符识别(OCR)技术已经得到了广泛应用.比如发票上用来识别关键字样,搜题App用来识别书本上的试题. 近期,这个叫做chineseocr_lite的OCR项目开源了,这 ...
- Github标星3K+，超轻量级中文OCR，支持竖排文字识别、ncnn推理，总模型仅17M
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 光学字符识别(OCR)技术已经得到了广泛应用.比如发票上用来识别关键字样,搜题Ap ...
- css表格文字超数量就竖排_绝了，超轻量级中文 OCR，你值得拥有
大家好,我是章鱼猫.今天给大家分享的开源项目是一个今后大数据时代以及图像识别时代非常常用的一个技术. 随着人工智能的发展,图像识别越来越常用,所以,今天推荐的开源项目就是:OCR 相关的. 这个开源项 ...
- GitHub 热榜：文字识别神器，超轻量级中文 OCR！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 整理 | AI 科技大本营 光学字符识别(OCR)技术已 ...
- 大小仅1MB，超轻量级通用人脸检测模型登上GitHub趋势榜
机器之心报道 项目作者:Linzaer 近日,用户 Linzaer 在 Github 上推出了一款适用于边缘计算设备.移动端设备以及 PC 的超轻量级通用人脸检测模型,该模型文件大小仅 1MB,320 ...
- html去掉父元素样式,CSS清除浮动使父级元素展开的三个方法
一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 为了使父级元素展开,有三种方法: 第一:设置父级元素的高度,但 ...
- CMMI3组织级文档列表清单
来源:http://www.hkspirt.com/?p=140 CMMI3组织级文档列表清单 文档所属 过程域名称 过程域中文 文档编号 文档名称 过程管理类 OT 组织培训 规范 HD-OT- ...
- 3模型大小_Github推荐一个国内牛人开发的超轻量级通用人脸检测模型
Ultra-Light-Fast-Generic-Face-Detector-1MB 1MB轻量级通用人脸检测模型 作者表示该模型设计是为了边缘计算设备以及低功耗设备(如arm)设计的实时超轻量级通用 ...
最新文章
- opencv 行与列
- LeetCode Pascal's Triangle
- boost::describe模块实现打印功能的测试程序
- 定时任务提交spark到yarn出现一直accepted以及yarn出现unhealthy情况
- Jquery+php+ajax实现表单异步提交，动态添加回复评论
- java.net.noroute,java.net.NoRouteToHostException: No route to host
- 构造函数内部原理 包装类
- 【数据结构与算法】数据结构与算法最基础理论
- 二分排序（java）
- 介绍几款WAP网页制作工具
- C语言算法——实现冒泡排序
- Mac下Zookeeper安装及配置
- 国外知名广告联盟平台
- 菜鸟日记（yzy）：集成Ucrop裁剪图片架构，并创建管理类使用
- 【精】HDFS Balancer原理、参数详解
- Scard API 智能卡操作
- 地图原点半径距离经纬度计算
- Thinkpad E450c开启Intel virtual technology
- 'BMap' is not defined 解决方案，亲测有效
- Openwrt/lede软路由设置为ap模式