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" ...
随机推荐
- 常见的web攻击手段
XSS:跨站脚本攻击 -典型实例为: 当用户在表达输入一段数据后,提交给服务端进行持久化.如果此用户输入的是一段脚本语言,而服务端 用户输入的数据没有经过转码.校验等就存入了数据库,在其他页面需要展示 ...
- 吴恩达机器学习笔记13-正规方程(Normal Equation)
到目前为止,我们都在使用梯度下降算法,但是对于某些线性回归问题,正规方程方法是更好的解决方案.如: 即: 运用正规方程方法求解参数: 注:对于那些不可逆的矩阵(通常是因为特征之间不独立,如同时包含英尺 ...
- LabVIEW（八）：程序结构中的循环结构
1.程序结构分为三种:循环结构.分支结构.顺序结构. 本文主要讨论循环结构. 2.While循环 左下角:循环计数端子i,从0开始计数,每进行一次循环,i自动增加1. 右下角:循环条件端子,当循环达到 ...
- 微信小程序支付接入实战
1. 微信小程序支付接入实战 1.1. 需求 最近接到一个小程序微信支付的需求,需要我写后台支持,本着能不自己写就不自己写的cv原则,在网上找到了些第三方程序,经过尝试后,最后决定了这不要脸作者的 ...
- JavaScript 对象（上）
简述: 1.是 JavaScript 的基本类型 2.是一种复合值,可通过名字访问这些值 3.可看作属性的无序集合,每个属性都是一个名/值对(属性名是字符串或标识符) 4.可以从一个称为原型的对象继承 ...
- 三、activiti工作流-流程设计工具
首先在diagrams下面新建一个文件夹 然后在这个文件夹下new一个Activiti Diagram new好后出现bpmn文件, 可以通过右键以xml方式打开bpmn文件查看源码 双击打开文件然后 ...
- ubuntu 16.04 下安装动态链接库方法
一般先使用ldd 来查看该应用程序缺少什么东西,然后,再根据sudo apt install XXX 去安装相应的动态库. 假如没有对应的库,可以使用: sudo ln -s /usr/lib/lib ...
- Impl模式实现之注意内联
最近学习muduo源码时,对于内联函数有了更深刻的认知. 内联(inline)在代码执行方面具有优势,但是有时使用不当,或者稍微不注意,就会造成编译错误. 以下将通过Impl实现说明一二: 头文件: ...
- python 调用c语言函数
虽然python是万能的,但是对于某些特殊功能,需要c语言才能完成.这样,就需要用python来调用c的代码了 具体流程: c编写相关函数 ,编译成库 然后在python中加载这些库,指定调用函数. ...
- js中select标签中的option选择
f1 = function () { //var selected_val = document.getElementById(test).value; var obj = document.getE ...