超轻量级三级展开列表
这几天在公司的通用管理后台，使用的左右框架结构，点击左侧，右侧展开内容，项目中经常遇到左侧二级或者三级的情况，以前都是使用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)设计的实时超轻量级通用 ...
最新文章
- 以SIGSEGV为例详解信号处理(与栈回溯)
- java体重指数计算器程序_育儿 - 低体重儿和巨大儿的危害
- Flex Socket 与 Ｃ# 通信
- JavaScript 复习之 Array 对象
- 手把手教你写一个Java的orm框架（4）
- java的finally_java的finally用法
- openshift4离线部署_OpenShift 4.2 离线安装补充记录
- 出国？上研？工作？回家种田？（三） IT类专业的工作方向与特点（软硬件技术等岗位）
- Quartz应用与集群原理分析
- 胡明浩 160809313 （我就会三个）
- 侧方、s弯道、坡起相关
- win10系统dnf安装不上服务器,升级到Win10正式版后不能玩DNF如何解决?
- 【转】基于知识图谱的推荐系统(KGRS)综述
- Android3D画廊总结整理
- 父窗口操控iframe
- Linux学习笔记（四）Linux基础操作
- 有限元中四面体的一些积分公式
- 表单和servlet在idea中实现文件的上传
- 微信中网页分享开发遇到的坑
- 英语常考知识点汇总笔记