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" ...
随机推荐
- Docker学习笔记-简单运行.netcore
前言: 环境:centos7.5 64 位 正文: 拉取 microsoft/dotnet, 安装完毕后执行 docker images 可以看到本地已经包含 microsoft/dotnet #包含 ...
- okHttp超时报错解决方案
Android 使用okhttp,如果客户端等待的时间超过了okHttp的默认时间,就会报错java.net.SocketTimeoutException: timeout 所以,需要在调用okHtt ...
- Chapter 4 Invitations——1
In my dream it was very dark, and what dim light there was seemed to be radiating from Edward's skin ...
- 用javascript写原生ajax(笔记)
AJAX 的全名叫做 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
- Core2.0知识整理
概述 Commond-Line ASP.NET结构文件 Startup 配置文件 中间件和依赖注入 依赖注入原理 框架自带的依赖注入(IServiceCollection) 依赖注入生命周期 依赖注入 ...
- Mysql 调优和水平扩展思路
系统调优参数 一些比较重要的参数: back_log:back_log值指出在MySQL暂时停止回答新请求之前的短时间内多少个请求可以被存在堆栈中.如果MySql的连接数据达到max_connecti ...
- 【原创】关于Git暂存区的理解
关于Git暂存区的理解 暂存区可以说是Git的三大重要的区域之一,另外两个分别是工作目录和Git仓库,所以说对暂存区的深入理解可以帮助我们理解很多Git命令背后隐藏的工作原理.今天,本文将以 ...
- Ubuntu16.04环境下搭建基于三台主机的mysql galera cluster集群（实测有效）
(注意: (1)文中红色字体部分不一定需要操作 (2)由于word文档编辑的原因,实际操作时部分命令需要手动输入!!直接复制粘贴会提示错误!! ) 一 搭建环境: 1 Ubuntu16.04版本(系 ...
- gradle 自定义插件 下载配置文件
1.新建Gradle项目: 2.建立src/main/groovy目录,并添加如下代码: ConfigPlugin.groovy package com.wemall.config import or ...
- [机器学习]正则化方法 -- Regularization
那添加L1和L2正则化有什么用?下面是L1正则化和L2正则化的作用,这些表述可以在很多文章中找到. L1正则化可以产生稀疏权值矩阵,即产生一个稀疏模型,可以用于特征选择 L2正则化可以防止模型过拟合( ...