JQuery之封装二级菜单

HTML二级菜单定义

    HTML代码定义如下，样式代码可以根据需要自行调整，重点是下面如何编写JQuery代码。

<ul class="nav">
						<li class="main-menu">
							<a class="active" href="#"><i class="fa fa-user-plus"></i>&nbsp;&nbsp;&nbsp;<span>个人信息</span>
								&nbsp;&nbsp;&nbsp;<i class="fa fa-chevron-right" id="fold-icon"></i> <i
									class="fa fa-chevron-down" id="drop-icon"></i></a>
							<!-- 子菜单 -->
							<ul id="menu" class="sub-menu nav">
								<li class="sub-menu-item">
									<a href="#userinfo" class="sub-menu-item-a" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本信息</a>
								</li>
								<li class="sub-menu-item">
									<a href="#datastatistic" class="sub-menu-item-a" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数据统计</a>
								</li>
								<li class="sub-menu-item">
									<a href="#safecenter" class="sub-menu-item-a" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;安全中心</a>
								</li>
							</ul>
						</li>
						<li class="main-menu">
							<a class="" href="#upload" data-toggle="tab"> <i class="fa fa-cloud-upload"></i>&nbsp;&nbsp;&nbsp;成果上报</a>
						</li>
						<li class="main-menu">
							<a class="" href="#query" data-toggle="tab"> <i class="fa fa-jsfiddle"></i>&nbsp;&nbsp;&nbsp;成果查询</a>
						</li>
						<li class="main-menu">
							<a class="" href="#detail" data-toggle="tab"> <i class="fa fa-codiepie"></i>&nbsp;&nbsp;&nbsp;成果明细</a>
						</li>
						<li class="main-menu">
							<a class="" href="#exportrecord" data-toggle="tab"> <i class="fa fa-cloud-download"></i>&nbsp;&nbsp;&nbsp;导出记录</a>
						</li>
						<li class="main-menu">
							<a class="" href="#all" data-toggle="tab"> <i class="fa fa-database"></i>&nbsp;&nbsp;&nbsp;成果汇总</a>
						</li>
					</ul>

Flex布局样式图

JQuery-二级菜单展开/闭合实现

    主要是实现思路：
①首先为所有一级菜单项添加点击事件。

$(".main-menu").click(function(e){
	//事件处理代码
}

②其次是事件的处理代码。主要逻辑为：当用户点击一级菜单项——“个人信息”时，借助内置JQuery对象this，获取到当前被点击一级菜单项对象，然后掉用find(选择器)去获取被实际点击到的二级菜单项，并判断这个获取到的对象是否为空，在不为空的条件下才能进行下一步操作。

	//通过this获取子菜单对象
	var sub_menu = $(this).find(".sub-menu");
	//判断是否为空
	if(sub_menu==undefined||sub_menu==null){
		return false;
	}

③接着，就可以通过被点击到的二级菜单项对象，设置CSS样式，让其显示出来就行（我这里用了flex布局，根据自己的布局情况，可以对代码再做修改）。完整代码如下，

/**
 * @alias ：二级菜单显隐控制
 * @description  要求：父级菜单使用css类选择器main-menu;子菜单使用css类选择器sub-menu.
 */
$(".main-menu").click(function(e){
	//通过this获取子菜单对象
	var sub_menu = $(this).find(".sub-menu");
	// console.log(e)
	//判断是否为空
	if(sub_menu==undefined||sub_menu==null){
		return false;
	}
	//通过this获取获取图标对象
	var fold_icon = $(this).find("#fold-icon");//折叠图标
	var drop_icon = $(this).find("#drop-icon");//展开图标
	
	//通过子菜单对象获取子菜单项
	// console.log(sub_menu)
	//解析子菜单项是否显示
	var isDisplay = $(sub_menu).css("display");
	if("none"===isDisplay){
		//控制子级菜单显示
		$(sub_menu).css("display","flex");
		//判断展开图标是否为空并使用
		modifyIconState(drop_icon,"inline-block")
		modifyIconState(fold_icon,"none");		
	}else{
		//控制子级菜单隐藏
		$(sub_menu).css("display","none");
		//判断折叠图标是否为空并使用
		modifyIconState(drop_icon,"none");
		modifyIconState(fold_icon,"inline-block")
	}
})

function modifyIconState(iconObj,state){
	if(undefined!=iconObj&&null!=iconObj){
		$(iconObj).css("display",state)
	}
}

JQuery-避免事件冒泡影响

    上面虽然完成了基本效果，但是，当点击二级菜单项时，会发现子菜单项会被闭合，这是因为受到了事件冒泡的影响，导致在父元素的点击事件中有调用了一次显隐控制代码。为了避免这种情况，可以加上如下的代码进行优化。

$(".sub-menu").click(function(e){
	 e.stopPropagation();
	//不会引起阻塞，后续编写的代码仍会执行
	console.log("阻止点击子元素标签-事件向上冒泡");//此句代码仍然可正常执行
})

最终效果对比图