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天

知道了
9彩注册 www.166467.com-快三彩票骗局大揭密| www.012015.com-星期一出什么彩票| www.25572.cc-彩客比分网-| www.89621.com-577彩票计划网| www.8862.site-新疆时时采彩走势图| www.075234.com-福彩500资讯| www.182128.com-河北福利彩票快3| www.297985.com-上海快三历史开奖号| www.441015.com-微信炫彩字体| www.97267.com-甘肃福彩3d查沟| www.995324.com-香港五分彩正规吗| www.bf38.com-幸运快三计划群| www.572216.com-福彩开机号对应码| www.644654.com-周六足彩伤停| www.813410.com-福彩十五选5开奖| www.512855.com-伯乐彩票登录网址| www.663906.com-招商银行彩票定投| www.113092.com-七乐彩胆拖中奖查询| www.180084.com-内蒙古快三历史遗漏| www.258444.com-足球500网胜负彩| www.700966.com-彩票开票信息| www.801082.com-宁波亿彩购物网店| www.885773.com-如何破解567彩票| www.fg28.com-彩票送19合集| www.l23.top-彩神通关注码准吗| www.56al.com-竟彩胜平负开奖| www.723515.com-广东晒彩票中奖| www.986959.com-彩票定位胆技巧稳赚| www.sa44.com-爱乐透门户彩票| www.20ur.com-体彩排列五太难了| www.44444.com-75彩票可以玩吗| www.126364.com-九万彩票下载安卓| www.607713.com-七乐彩走势图五行| www.7393.win-竞彩销售点-| 大赢家彩票www.391411.com| www.cai3332.com快3彩票软件| www.0288.cc-真有人中彩票吗| www.25956.cc-体彩排列五开彩结果| www.874800.com-酷彩网-| www.47li.com-今晚七星彩预测号| www.298593.com-彩票店图片-| www.369544.com-福彩3d?d走势图| www.977390.com-彩色混凝土压模价格| www.263333.com-彩虹旗-| www.755511.com-重庆体彩中心地址| www.26to.com-买彩票赔了几十万| www.123193.com-欢乐彩快3-| www.556174.com-福利彩票星期几开奖| www.525768.com-c58彩票手机下载| www.258097.com-全民福彩是真的假的| www.028717.com-8828彩票线路检| www.gt13.com-广东好彩1开奖号码| 500彩票www.652912.com| www.m86.me-178彩票平台下载| www.13113.cc-竞彩足球比分前瞻| www.019581.com-云南彩票-| www.112152.com-中三亿彩票-| www.56687.cc-速彩网下载-| www.07eq.com-梦幻彩铅画手绘| www.299245.com-中彩在线手机版| www.381201.com-七乐彩周末开奖吗| www.719023.com-手电筒彩虹实验| www.856719.com-彩视怎么上传全民| www.936967.com-七乐彩复式开奖表| www.410309.com-彩库宝典怎么看开奖| www.ho7.com-甘肃快三开爱彩乐| www.04nh.com-七星彩有胆拖吗| www.960.org-彩票平均遗漏值越大| www.59339.cc-足彩预测最准的网站| www.356084.com-金源彩票平台| www.477966.com-时彩族在线计划| www.704233.com-福彩3d万能三码| www.809783.com-竞彩术语-| www.888845.com-鹤壁体彩-| www.986247.com-福彩4十1奖金多少| www.pq20.com-网易彩民彩票| www.303552.com-好彩三玩法-| www.509596.com-ee彩是真的吗| www.619720.com-彩票开奖专区百度| www.wh57.com-内蒙古体彩-| www.70fr.com-红菜苔彩票下载| www.3395.mobi-1077彩票app| www.62869.cc-智慧彩挂机软件下载| www.85we.com-玩彩票如何看趋势| www.5070.org-彩票犯法么-| www.29517.cc-彩票赚佣金-| www.984431.com-彩票大师免费下载| 梦想彩票www.33112s.com| www.951687.com-红彩直播邀请码| 39彩票www.3933n.cc| www.146733.com-福建即乐彩中奖规则| www.669498.com-彩钢夹芯板岗亭| www.823478.com-彩涂卷用途是什么| www.926924.com-31竞彩吧下载| 500彩票www.912156.com| www.3621.org-大唐彩票下载安装| www.bb12.cc-一分快三公式| www.29183.cc-手机好买彩票吗| www.056291.com-彩票算号软件| www.136561.com-成功彩票是黑平台吗| www.236883.com-中体彩官网-| www.62199.cc-广西福利彩票七乐彩| www.7nd.com-彩票可以送人吗| www.303778.com-陇南福彩中心| www.370767.com-98娱乐彩票网下载| www.456153.com-福利彩票背手| www.zt.cc-中彩彩票下载安装| www.qp63.com-福利彩票今日开奖号| www.0sv.com-彩客网手机完整比分| www.49kw.com-彩富会员料-| www.cp5112.com-江苏快三新规则| www.562593.com-开福利彩票店挣钱吗| www.775233.com-49c彩票网网址| www.019207.com-彩票彩之家-| www.254792.com-时时彩大小单双口诀| www.373459.com-九州全球彩票网址| www.643118.com-彩妆美容化妆学校| www.730250.com-彩票投注易彩网| www.801091.com-163彩票开奖| www.027769.com-乐聚彩票注册邀请码| www.175776.com-快三规律破解软件| www.305277.com-彩票中奖查询35期| www.541655.com-tt彩票可靠吗| www.580218.com-成都福彩中奖规则| www.008197.com-彩票开奖今晚| www.822469.com-爱博网络彩票| 大赢家彩票网www.54400b.com| www.tv0.com-彩票快三分析软件| www.541114.com-彩贝壳人工客服电话| www.750879.com-江苏快三走视| www.444898.com-风铃艾彩原创合集| www.921608.com-福利彩票有假吗| 彩客网www.030310.com| www.8350.cn-菲律宾时时彩合法吗| www.110127.com-台湾乐透彩開獎网址| www.823753.com-彩票速杀表双色球| www.921508.com-甘肃福彩一定牛开奖| www.994721.com-福彩3地字谜图谜| www.hv40.com-福彩3d字继-| www.9689.com-口袋彩店ios版| www.79593.com-真人真事足彩博客| www.44bj.com-彩票开奖号能算| www.755735.com-民彩网彩民提供可靠| www.952097.com-北京五分彩官网开奖| 辉煌彩票www.2875s.com| www.qp94.com-体彩福彩哪个靠谱| www.23rn.com-球球大作战七彩月饼| www.86uc.com-罗庄体彩中奖没人领| www.110076.com-快三123走势图| www.eg87.com-高频彩彩票-| www.wd94.cc-甘肃体彩中心| www.46ws.com-体彩网上接单子平台| www.339690.com-九九彩吧-| www.xh89.com-7彩娱乐注册| www.0765.cc-福利彩票那几天开奖| www.106152.com-雅彩彩票信誉好吗| www.659984.com-248彩票平台下载| www.25329.cc-彩铅绘画技法| www.353004.com-八八彩票网址是什么| www.353858.com-中国移动梦网彩票| www.957882.com-爱彩乐有风险没有| www.qo38.com-北京快三福彩| www.5951.cn-彩票真假揭秘| www.54400.cc-今天七乐彩开奖号|