jquery 树形导航菜单无限级
转自：http://www.jb51.net/article/71615.htm 侵删
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
padding:0;
margin:0;
}
ul{
padding: 0;
margin:0;
}
.navlist {
/*margin-left: -30px;*/
} .navlist div {
padding-left: 15px;
} .navlist div ul {
overflow: hidden;
display: none;
height: auto;
} .navlist span {
display: block;
height: 25px;
line-height: 25px;
padding-left: 5px;
margin: 1px 0;
cursor: pointer;
border-bottom: 1px solid #CCC;
} .navlist span:hover {
background-color: #e6e6e6;
color: #cf0404;
} .navlist a {
color: #333;
text-decoration: none;
} .navlist a:hover {
color: #06F;
} .btn {
height: 30px;
margin-top: 10px;
border-bottom: 1px solid #CCC;
}
</style>
</head>
<div class="btn">
<input name="" type="button" id="btn_open" value="全部展开" />
<input name="" type="button" id="btn_close" value="全部收缩" />
</div>
<div id="navlist" class="navlist"></div> <body>
<!-- <div id="menu"></div> -->
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var json = [{
"id": 1,
"name": "系统管理", // 菜单名称
"url": "#", //映射URL
"icon": "sys-icon", //图标样式
"pid": 0, //父菜单ID
"items": []
}, {
"id": 1,
"name": "系统管理1", // 菜单名称
"url": "#", //映射URL
"icon": "sys-icon", //图标样式
"pid": 0, //父菜单ID
"items": null }, {
"id": 5,
"name": "测试菜单1",
"url": "#",
"icon": "sys-icon",
"pid": 1,
"items": [{
"name": "测试菜单1-1",
"url": "#", //映射URL
}, {
"name": "测试菜单1-2",
"items": [{
"name": "测试菜单1-2-1",
"url": "#", //映射URL
}, {
"name": "测试菜单1-2-2",
"url": "#", //映射URL
}, {
"name": "测试菜单1-2-3",
"url": "#", //映射URL
}]
}, ]
}, {
"id": 5,
"name": "测试菜单2",
"url": "#",
"icon": "sys-icon",
"pid": 1,
"items": [{
"name": "测试菜单2-1",
"url": "#", //映射URL
}, {
"name": "测试菜单2-2",
"url": "#", //映射URL
}]
}, {
"name": "测试菜单3",
"items": [{
"name": "测试菜单3-1",
"url": "#", //映射URL
items: [{
"name": "测试菜单3-1-1",
"url": "#", //映射URL
}]
}, {
"name": "测试菜单3-2",
"url": "#", //映射URL
items: [{
"name": "测试菜单3-2-1",
"url": "#", //映射URL
}]
}, {
"name": "测试菜单3-3",
"url": "#", //映射URL
}]
}, {
"name": "测试菜单4",
}, {
"name": "测试菜单5",
}]
console.log(json)
/*递归实现获取无级树数据并生成DOM结构*/
var str = "";
var forTree = function(o) {
for (var i = 0; i < o.length; i++) {
var urlstr = "";
try {
if (typeof o[i]["url"] == "undefined") {
urlstr = "<div><span>" + o[i]["name"] + "</span><ul>";
} else {
urlstr = "<div><span><a href=" + o[i]["url"] + ">" + o[i]["name"] + "</a></span><ul>";
}
str += urlstr;
if (o[i].items != null) {
forTree(o[i].items);
}
str += "</ul></div>";
} catch (e) {}
}
// console.log(str);
return str;
}
/*添加无级树*/
document.getElementById("navlist").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function() {
//给有子对象的元素加[+-]
$("#navlist ul").each(function(index, element) {
// console.log(index, element);
var ulContent = $(element).html();
var spanContent = $(element).siblings("span").html();
if (ulContent) {
$(element).siblings("span").html("[+] " + spanContent)
}
});
$("#navlist").find("div span").click(function() {
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3, spanStr.length);
if (ul.find("div").html() != null) {
if (ul.css("display") == "none") {
ul.show(300);
$(this).html("[-] " + spanContent);
} else {
ul.hide(300);
$(this).html("[+] " + spanContent);
}
}
})
}()
/*展开*/
$("#btn_open").click(function() {
$("#navlist ul").show(300);
curzt("-");
})
/*收缩*/
$("#btn_close").click(function() {
$("#navlist ul").hide(300);
curzt("+");
}) function curzt(v) {
$("#navlist span").each(function(index, element) {
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3, spanStr.length);
if (ul.find("div").html() != null) {
$(this).html("[" + v + "] " + spanContent);
}
});
}
</script>
</body> </html>
jquery 树形导航菜单无限级的更多相关文章
- 在ASP.NET MVC下实现树形导航菜单
在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- jquery 滑块导航菜单
带滑块的导航菜单,鼠标悬浮时,滑块会移动至鼠标位置,离开时,滑块会回到原来的位置,点击菜单之后滑块会停留在被点击菜单位置,等待下一次的鼠标悬浮事件或者点击事件,效果图: 图片效果不行,直接上代码: & ...
- jQuery滑动导航菜单
js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...
- JQuery 实现导航菜单的高亮显示
需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...
- JS——树形导航菜单（html的ul嵌套，jQuery的css()，show(),hide(),index()等方法）
必备工具:jquery库文件.我这里用的是1.4版本的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 使用像AdminLTE的前端框架，树形导航菜单实现方式都有哪些？
之前用easyui等富前端框架开发的时候都是使用封装好的县城的插件,现在使用最新的类似AdminLTE似的前段框架实现树形菜单都用什么方式? 后台拼接html然后前端用JS append方法添加还是直 ...
- jquery水平导航菜单展示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery之导航菜单（点击该父节点时子节点显示，同时子节点的同级隐藏，但是同级的父节点始终显示）
注:对于同一个对象不超过3个操作的,可直接写成一行,超 过3个操作的建议每行写一个操作.这样可读性较强,可提高代码的可读性和可维护性 核心代码: $(".has_children" ...
随机推荐
- Android 关于解决MediaButton学习到的media控制流程
问题背景:话机连接了头戴式的耳机,在通话过程中短按按钮是挂断电话,长按按钮是通话静音.客户需求是把长按改成挂断功能,短按是静音功能. android版本:8.1 在通话中,测试打印信息,可以看到but ...
- ProgressDialog修改TextView的TextSize
ProgressDialog修改TextView的TextSize 问题描述 今天UI过来找我说是加载条的字号太小了,不好看,希望可以改一下,然后我就研究一下如何修改ProgressDialog里面T ...
- LabVIEW（四）：数据存储和文件IO
1.使用NI数据采集板卡来进行数据保存和文件I/O操作.2.在一个典型的测试测量系统当中,包括:信号调理.信号采集.信号分析.信号显示.数据存储.数据存储:将采集到的数据储存到磁盘上,以备日后离线分析 ...
- C/C++结构体成员偏移量获取
分析代码节选自muduo. 以下代码通过offsetof获取sin_family在sockaddr_in6中的字段偏移量. static_assert(offsetof(sockaddr_in6, s ...
- win10安装MySQL5.7.21
一. 下载MySQL 1. 打开MySQL官网,选择DOWNLOADS --> Community 2. 下拉页面找到MySQL on Windows(installers & tool ...
- springMVC(2)---获取前段数据
springMVC(1)---获取前段数据 首先说明,如果你学过Struts2,那么在学springMVC就会简单很多,我也不最基础的开始写了,我前篇文章搭建了个ssm框架,算是springmvc入门 ...
- 使用.NET Hardware Intrinsics API加速机器学习场景
ML.NET 0.6版本刚刚发布不久,我们知道ML.NET代码已经依赖于使用本机代码库的性能矢量化.这是一个重新实现托管代码中现有代码库的机会,使用.NET Hardware Intrinsics进行 ...
- sql server 高可用故障转移(5)
测试故障转移群集报告 在SQL-CL01(hsr 50)进行故障转移群集的创建,如图下图所示,在SQL-CL01和SQL-CL02的“服务器管理”中右键点击“功能”,选择“添加功能 勾选故障转移群集 ...
- mysql 开发基础系列18 存储过程和函数(下)
1. 光标的使用(游标) 在存储过程和函数中可以使用光标对结果集进行循环的处理,光标使用包括光标的声明,open ,fetch,close. 下面在存储过程中使用一个光标, 这个举例中光标里的逻辑不重 ...
- 基础编程复习：输出n以内的所有素数
暴力遍历:对于1~n以内的每一数i 每一个i只需要考虑2~i开根号以内是否有可以让i整除的数,即(i%x==0)只要满足就不是素数 否则输出 #include<iostream> #inc ...