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> <iclass="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("阻止点击子元素标签-事件向上冒泡");//此句代码仍然可正常执行
})

最终效果对比图