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 APK安装过程学习笔记
1.什么是APK APK,即Android Package,Android安装包.不同平台的安装文件格式都不同,类似于Windows的安装包是二进制的exe格式,Mac的安装包是dmg格式.APK可以 ...
- 《http权威指南》读书笔记5
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
- LabVIEW（三）：定时与触发
一.定时 多功能数据采集板卡的时钟特性,举例为M系列定时引擎:板卡上控制采集和波形发生的三个时钟:AI Sample Clock.AI Convert Clock.AO Sample Clock.所有 ...
- java的四种内部类详解
引言 内部类,嵌套在另一个类的里面,所以也称为:嵌套类; 内部类分为以下四种: 静态内部类 成员内部类 局部内部类 匿名内部类 一.静态内部类 静态内部类: 一般也称"静态嵌套类" ...
- Python的 is 和 == 弄懂了吗？
在Python中一切都是对象. Python中对象包含的三个基本要素,分别是: id(身份标识) type(数据类型) value(值) 对象之间比较是否相等可以用 == ,也可以用 is . is ...
- [原创]K8Cscan插件之Weblogic漏洞扫描&通用GetShell Exploit
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- eos开发(二)使用cleos命令行客户端操作EOS（钱包wallet基础操作）
不知道下边这一段英文你们是不是能看懂,如果看不懂那就算了,我就是转过来随便看看的. 总之你记住nodeos.cleos和keosd这三个工程十分重要就行了,回头咱们的研究都从这三个工程杀进去. EOS ...
- 如何批量添加图片到ppt的方法
如何批量添加图片到ppt 许多时候会做一些幻灯片,需要大量的图片,但是往往一张以张的加图片,会很浪费时间,如何快速添加图片,一次解决呢? 步骤:插入-相册-点击相册 点击文件,批量选择你要插入的图片, ...
- C#版 - 剑指offer 面试题9：斐波那契数列及其变形(跳台阶、矩形覆盖) 题解
面试题9:斐波那契数列及其变形(跳台阶.矩形覆盖) 提交网址: http://www.nowcoder.com/practice/c6c7742f5ba7442aada113136ddea0c3?tp ...
- newwork setup
#-*-coding:utf-8-*- ######################################################################### # Copy ...