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" ...
随机推荐
- lua入门demo（HelloWorld+redis读取）
1. lua入门demo 1.1. 入门之Hello World!! 由于我习惯用docker安装各种软件,这次的lua脚本也是运行在docker容器上 openresty是nginx+lua的各种模 ...
- nginx+lua学习
1. nginx+lua学习 1.1. 网关架构 1.2. nginx命令和信号控制 nginx -s stop 快速关闭,不管有没有正在处理的请求 nginx -s quit 优雅关闭方式,推出前完 ...
- es7你都懂了吗？今天带你了解es7的神器decorator
es7带来了很多更强大的方法,比如async/await,decorator等,相信大家对于async/await已经用的很熟练了,下面我们来讲一下decorator. 何为decorator? 官方 ...
- vue 关于数组和对象的更新
在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 ...
- python+appium的物理按键代码
代码就一句driver.keyevent()括号内填入的是物理按键的数字代号 代号表: 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOM ...
- Android--UI之DatePicker、TimePicker...
前言 这一篇博客分别讲解Android平台下,关于日期和时间的几个相关控件.包括DatePicker(日期选择控件).TimePicker(时间选择控件).DatePickerDialog(日期选择对 ...
- 编码（1）学点编码知识又不会死：Unicode的流言终结者和编码大揭秘
学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 http://www.freebuf.com/articles/web/25623.html 如果你是一个生活在2003年的程序员,却不了 ...
- 一篇文章详解python的字符编码问题
一:什么是编码 将明文转换为计算机可以识别的编码文本称为“编码”.反之从计算机可识别的编码文本转回为明文为“解码”. 那么什么是明文呢,首先我们从一段信息说起,消息以人们可以理解,易懂的表示存在,我们 ...
- Tomcat他山之石.可以攻玉(一)Server组件
Server组件 Server组件作用: 采用观察者模式,又叫源-收听者的设计模式,提供了可以动态添加.删除的监听器,作用是在Server组件的不同生命周期中完成不同的功能.逻辑: Tomcat容器的 ...
- centos7安装Wkhtmltopdf
从官网下载预编译版安装: wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.4/wkhtmltox-0.12 ...