背景 接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单。其次就是当使用鼠标点击一个菜单选项时就把该菜单及其子菜单固定,当鼠标移出所
背景
接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单。其次就是当使用鼠标点击一个菜单选项时就把该菜单及其子菜单固定,当鼠标移出所有菜单选项的范围是依然让其显示子菜单,再次点击取消固定)。
原来的导航栏是使用ASP.NET Ajax的 HoverMenuExtender服务端控件实现的。我们知道,服务端控件的优点在于快速开发,香港空间,香港虚拟主机,但是缺点是不能够进行个性化定制,且效率也是一个问题。最开始本来计划在原有基础上修改,但是发现该控件无法满足我们的个性化需求,网站空间,所有决定使用jQuery来实现,并停止使用该控件。这样的好处是不需要修改后台的代码,只需要在前端增加JS脚本就可以了。导航栏是在母版页中实现的,所以我使用的方案是在页面HTML生成后,在前台使用jQuery动态绑定jQuery提供的mouseenter和mouseleave事件。
我们知道通过jQuery绑定事件的方式有很多种(one、tigger、on、delegate、live、bind等以及其对应的卸载事件方法),常用的有下面三种,其他的不外乎是它们的扩展和衍生,如下:
target.eventType(function(){});target.bind(eventType,function(){});parentTarget.delegate(target, eventType, function(){} );