QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery动态添加多级收缩菜单

jQuery动态添加多级收缩菜单

jquery使用json数据格式动态创建多级下拉收缩菜单导航。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<!--页面布局,可忽略!-->
<link rel="stylesheet" type="text/css" href="css/m-base.css" />

<!--左侧导航样式-->
<link rel="stylesheet" type="text/css" href="css/LeftNav.css"/>

2、head引入js文件

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/LeftNav.js" type="text/javascript"></script>

3、body引入HTML代码

<div class="left"></div>

<script>
	var menu = {
		name: '', //名字
		level:'0',
		haschildren: true, //是否有子节点
		url: '#', //url路径
		isopen: false, //是否展开
		children: [{ //子节点
			name: '1',
			level: '1',
			haschildren: true,
			url: '',
			isopen: true,
			children: [{
				name: '1.1',
				level: '2',
				haschildren: true,
				url: '',
				isopen: true,
				children: [{
					name: '1.1.1',
					level: '3',
					haschildren: false,
					url: '14-1.html',
					isopen: true,
					children: ''
				}, {
					name: '1.1.2',
					level: '3',
					haschildren: false,
					url: '#',
					isopen: false,
					children: ''
				}]
			}]
		}, {
			name: '2',
			level: '1',
			haschildren: true,
			url: '#',
			isopen: false,
			children: [{
				name: '2.1',
				level: '2',
				haschildren: true,
				url: '#',
				isopen: false,
				children: [{
					name: '2.1.1',
					level: '3',
					haschildren: false,
					url: '#',
					isopen: false,
					children: ''
				}, {
					name: '2.1.2',
					level: '3',
					haschildren: false,
					url: '#',
					isopen: false,
					children: ''
				}]
			}, {
				name: '2.2',
				level: '2',
				haschildren: true,
				url: '#',
				isopen: false,
				children: [{
					name: '2.2.1',
					level: '3',
					haschildren: false,
					url: '#',
					isopen: false,
					children: ''
				}, {
					name: '2.2.2',
					level: '3',
					haschildren: true,
					url: '#',
					isopen: false,
					children: [{
						name: '2.2.2.1',
						level: '4',
						haschildren: true,
						url: '#',
						isopen: false,
						children: [{
							name: '2.2.2.1.1',
							level: '5',
							haschildren: false,
							url: '#',
							isopen: false,
							children: ''
						}],
					}]
				}]
			}]
		}]
	}
	//leftNav(menu)
	$.leftNav(".left",menu);
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
爱彩票 www.644665.com-翼彩宝合法吗| www.85613.cc-仙家算彩票-| www.89rq.com-姚半仙足彩-| www.4096.org-珐琅彩瓷器的市场| www.25657.cc-彩库宝典图库版本| www.90nk.com-优胜客博彩公司| www.52269.cc-上海体彩爱乐彩| www.4sq.com-双色球彩民中奖故事| www.741922.com-掌聊彩票骗局揭秘| www.855850.cc-3d彩易网-| www.950939.com-捷报网足彩分析预测| 500万彩票www.02500w.com| www.ly08.com-好彩妹是什么电视剧| www.ej73.com-莆田快三开奖走势图| www.m47.net-福彩十选五走势图| www.91nb.com-银行卡号被十三彩| www.8297.xyz-众和彩票聊天室| www.994650.com-竞彩足球单注上限| www.663922.com-南宁广西福彩宾馆| 易彩网www.36166i.com| www.261373.com-98彩票怎样-| www.354403.com-三个亿彩票-| www.103068.com-福彩快三过年休息吗| www.962342.com-湖兆快三开奖结果| www.364960.com-彩票k线视频| www.1333.me-亿购彩合法吗| www.22225.com-双色球牛彩网预测| www.100820.com-必中彩票ⅱ-| www.3966.live-378彩票下载| www.50qd.com-彩经网快三-| www.5728.online彩票app代理| www.40355.com-关小刀足彩解盘| www.761567.com-乐彩网福彩三d网页| www.210415.com-江西快三开奖结果| www.290308.com-快三选号助手手机版| www.uv22.com-体彩三亿-| www.260946.com-江苏快彩助手下载| www.885940.com-呼市体彩怎么代理| www.964202.com-彩票翻倍公式| www.as71.com-众彩网大乐透走势图| www.xc01.com-今天快三豹子预测| www.29oh.com-派彩洗面奶痘立消| www.323252.com-宝乐彩app-| www.r45.biz-福彩3d彩500| www.76mr.com-足彩开奖公告i| www.3846.mobi-十二生肖彩图片大全| www.70219.com-长城彩票网址| 500彩票www.937986.com| www.kl10.com-易彩快3怎么下载| www.f11.cc-七星彩开奖信息网易| www.5155.pw-福彩3d总汇全图| www.055291.com-买体育彩票好| www.xs89.com-3980元彩票-| www.iv67.com-合肥快三公交| www.809405.com-955彩票ios-| www.914813.com-福彩v98-| www.980294.com-我要购彩票-| www.ed45.com-吉林快三开将结果查| www.p81.com-微信登录彩票软件| www.0843.vip-足彩和福彩哪个真实| www.82087.com-天下免费彩票的资料| www.182616.com-快3彩票下载安装| www.297495.com-时时彩百位杀号法| www.819516.com-彩票吵群技巧| www.914718.com-传奇彩票大发快三| www.979863.com-三门峡快三开奖| www.66ob.com-数字3彩票开奖号码| www.155115.com-希腊十分彩下载安装| www.cp2202.com-福彩湖北快三一定牛| www.3459.in-发大财彩票-| www.50520.com-时时彩高概率不倍投| www.237395.com-中国体彩网下载安装| www.020294.com-体彩专家杀码| www.634745.com-新德里彩票哪里的| www.973879.cc-二四六天天彩票资料| www.cp7552.com-福彩3d乐彩-| www.rn95.com-⑧号彩票论坛的网址| www.22jc.cc-天空彩禁肖| www.95552.cc-天天中彩票免费提现| www.650868.com-最近天津彩漏洞| www.m91.net-十大黑彩-| www.479700.com-福彩3d新手入门| www.877639.com-买足彩是赌博吗| www.947299.com-一分快三必中计划| 500彩票www.50074h.com| www.px92.com-数字彩票-| www.13279.cc-足彩投注比例查询| www.772.red-第一台彩色相机下载| www.139921.com-七星彩加急版专区| www.93802.com-5o0万彩票网官网| www.310163.com-云南省彩票中心位置| www.32op.com-大远洋竞彩每天视频| www.0722.date-博彩套路-| www.7497.vip-福彩大奖排行| www.36357.cc-福彩走势图有用吗| www.559190.com-呼和浩特彩票中心| www.678030.com-南方好彩网双彩网| www.821376.com-济宁福彩中心领导| www.792663.com-彩票和值-| www.909271.com-天津快三是真是假| www.361983.com-雨后彩虹的句子图片| www.fe59.com-彩票长龙是什么意思| www.231708.com-3d福彩过滤app| www.090046.com-凤彩app下载| www.180292.com-福彩快三开奖结果| www.823918.com-福彩3d模拟摇奖噐| www.f84.pw-查询体彩排列三字迷| www.28dc.com-手机投注七星彩| www.96hi.com-号彩票论坛网址| www.423855.com-海滨时时彩计划| www.590445.com-助赢彩票软件贴吧| www.665133.com-七星彩那几天开奖| www.753628.com-2m彩票app-| www.938012.com-双赢彩票是真的吗| www.979717.com-新亚安欣经营彩票吗| www.24aq.com-729彩票app-| www.962555.com-旺旺彩票下载软件| www.cai1222.com福彩快3开奖号码| www.pe05.com-河北省福利彩票中心| www.44gc.cc-彩之云是什么软件| www.7032.org-手机购彩兼职| www.144549.com-腾龙时时彩做号| www.m77.club-彩票开奖内蒙快三| www.571962.com-2分彩开奖记录| www.c47.net-福利彩票游戏机| www.38212.cc-彩票售卖机-| www.kj1.com-湖北福彩开奖公告| www.693990.com-买体彩用什么软件| www.810849.com-7乐彩开奖结果历史| www.322055.com-杏彩彩票平台靠谱吗| www.129962.com-五分彩玩法规则| www.494127.com-彩票自选-| www.718503.com-江苏快三网购| www.367273.com-彩票返奖控制| www.492856.com-成都彩涂板| www.564574.com-越南5分彩计划| www.669210.com-投彩计划下载| www.283233.com-彩票双色球玩法规则| www.ei22.com-福彩61走势图| www.rd55.com-重庆时时彩暂停销售| www.997403.com-福彩乐透app| www.vh27.com-幸运快三实时计划| www.948493.com-福利彩票刮刮卡| www.777066.com-彩宝宝app官网| 大赢家彩票平台www.351957.com| www.7655.pw-双色球彩票长宽尺寸| www.039950.com-足彩2串1中一场| www.211140.com-乐彩app-| www.018193.com-三国梦想星彩漫画| www.358610.com-彩票是怎么个买法| www.0534.com-体彩大老头开奖信息| www.495609.com-3d彩票投注-| www.21oo.com-qq拉人玩彩票的| www.4012.pro-sb是哪个博彩公司| www.029876.cc-567彩票手机乐园| www.5313.me-龙岗区体彩店转让| www.17222.com-娇彩钰妍一套价格| www.965662.com-彩神争霸内部邀请码| www.00080.cc-高盛时时彩蜂巢团队| www.133569.com-生肖天天好彩1| www.519238.com-福彩千禧3d彩牛网| www.58qx.com-体彩开奖19042| www.4829.org-如何彩票中大奖| www.22422.cc-因彩礼钱分手|