基于jquery的左侧菜单栏

最新推荐文章于 2022-03-01 01:10:20 发布

weixin_42222353

最新推荐文章于 2022-03-01 01:10:20 发布

阅读量173

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_42222353/article/details/105768029

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>一二级菜单</title>
	<style type="text/css">
		#menu{
			background-color:#999;
			border: 1px solid #0f0;
			width:300px;
		}
		#menu dl{
			border: 1px solid #000;
		}
		#menu dl dd{
			display: none;
		}
	</style>
</head>
<body>

	<!-- demo 开始-->
	<div id="menu">
		<dl id="menu-article">
		    <dt><i class="Hui-iconfont">&#xe62d;</i><span>管理员</span><i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
		    <dd>
		        <ul>
		            <li><a data-href="/mdtipstaff/" data-title="账户管理" href=" ">账户管理</a></li>
		        </ul>
		    </dd>
		</dl>
	</div>
	<!-- demo 结束-->

	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript">
		/**
		 * icon:一级菜单的图标
		 * name:一级菜单的名
		 * sub:二级菜单
		 * href:二级菜单的链接
		 * title:二级菜单的名
		 * [icon_menu description]
		 * @type {Array}
		 */
		var icon_menu = [
			    {icon:"&#xe616;",name:"生产订单",sub:[{href:"orderin",title:"导入CRM订单"}]},
			    {icon:"&#xe66a;",name:"仓库信息",sub:[{href:"storepos",title:"仓库位置"},{href:"storerule",title:"细分规则"}]},
			    {icon:"&#xe670;",name:"外购仓",sub:[{href:"storebuyin",title:"新购入库"},{href:"_blank2.html",title:"BOM领料单"},{href:"_blank2.html",title:"BOM退料单"},{href:"_blank2.html",title:"待审批退料单"},{href:"stockoutbuy",title:"采购退货"}]},
			    {icon:"&#xe647;",name:"注塑工程",sub:[{href:"projectPart",title:"产品管理"},{href:"designbom",title:"BOM清单"},{href:"templateSop",title:"工艺模板"},{href:"designcraft",title:"工程SOP"}]},
			    {icon:"&#xe61a;",name:"PMC排产",sub:[{href:"bomprocess",title:"加工清单"},{href:"projectpmc",title:"计划排产"},{href:"projectturn",title:"周转箱带"}]},
			];
			
			// 菜单集合
			var str ="";
			for(var i in icon_menu){//一级菜单循环
				var sub="";
				var tit = icon_menu[i].sub;
				for(var k in tit){//二级菜单循环
					sub+="<li><a data-href='/"+tit[k].href+"/' data-title='"+tit[k].title+"' href=''>"+tit[k].title+"</a></li>";
				}

				str+="<dl id='menu-article'><dt><i class='Hui-iconfont'>"+icon_menu[i].icon+"</i><span>"+icon_menu[i].name+"</span><i class='Hui-iconfont menu_dropdown-arrow'>&#xe6d5;</i></dt><dd><ul>"+sub+"</ul></dd></dl>";
			}
			
				//先清空在渲染
				$('#menu').empty().html(str);

				//点击显示/隐藏
				$('#menu dl dt').on("click",function(){
					if($(this).next("dd").css("display")=="block"){
						$(this).next("dd").hide(500);
					}else{
						$("#menu dl dd").hide(500);
						$(this).next("dd").show(500);
					}

				});
				

				

	</script>
</body>
</html>

weixin_42222353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的左侧菜单栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>一二级菜单</title> <style type="text/css"> #menu{ background-color:#999; border: 1...
复制链接

扫一扫