《JQuery(纵向横向菜单)小结》由会员分享，可在线阅读，更多相关《JQuery(纵向横向菜单)小结（8页珍藏版）》请在金锄头文库上搜索。
1、JQuery(纵向横向菜单)小结2010/11/24说明：此次小结是为了展示JQuery实现菜单的效果。文件清单：menu.jsp -菜单JSP页面jquery.js-JQuery源文件JSmenu.js-菜单使用的JSstyle.css-菜单样式文件menu.jsp源文件，如下：JQuery菜单效果机构管理添加机构修改机构查询机构部门管理添加部门修改部门查询部门员工管理添加员工修改员工查询员工机构管理添加机构修改机构查询机构部门管理添加部门修改部门查询部门员工管理添加员工修改员工查询员工style.css样式源文件，如下：/*菜单样式：2010-11-24*/UL,LI/*去掉小圆点*/li
2、st-style: none;UL/*清除子菜单缩进*/padding: 0;/*但IE浏览器不能缩进*/margin: 0;/*主菜单样式*/.mainMenu,.crossMenu/*字体大小*/font-size: 12px;/*添加背景图片*/background-image: url(././resources/images/title.gif);/*背景图横向重复*/background-repeat: repeat-x;/*主菜单宽度*/width: 70px;/*子菜单样式*/LI/*背景色*/background-color: #EEEEEE;A/*取消链接的下划线*/tex
3、t-decoration: none;/*子菜单缩进*/padding-left: 15px;/*让连接充满区域，及菜单边缘也可以点击*问题：如果值为block,IE会出现问题，*不能填充，且子菜单会变样，因此我们*用 inline解决，但是不能解决填充，*因此加上宽度(70 - 15)*/display: block;display: inline;width: 70px;/*在所有的链接加3个像素的上边距和下边距*/padding-top: 3px;padding-bottom: 3px;.mainMenu A,.crossMenu A/*主菜单链接为白色*/color: white;/*
4、链接背景图片*/background-image: url(././resources/images/collapsed.gif);/*背景图不重复*/background-repeat: no-repeat;/*背景箭头的位置*/background-position: 2px center;.mainMenu LI A,.crossMenu LI A/*子菜单链接文字为黑色*/color: black;/*去掉子菜单背景箭头*/background-image: none;/*主菜单下的UL全部隐藏*/.mainMenu UL,.crossMenu ULdisplay: none;/*横向
5、菜单*/.crossMenu/*横向排列*/float: left;/*字体大小*/font-size: 12px;menu.js源文件，如下：$(function()/* * 如果使用.mainMenu a选择器，会 * 出现点击子菜单也会触发click事件 * 解决方法：使用JQuery的特有方式 * .mainMenu a * */$(.mainMenu a).click(function()/找到主菜单项的子菜单项var childMenu = $(this).next(ul);/*常规方法*/*if(none = childMenu.css(display)childMenu.css
6、(display,block);elsechildMenu.css(display,none);*/*使用JQuery的方法 * 数值为毫秒 * 文字：slow/normal,fast*/childMenu.show(100);/childMenu.show(normal);/childMenu.hide(100);/省去if else 判断/childMenu.toggle(normal);/卷帘效果，也支持参数/childMenu.slideDown();/childMenu.slideUp();/省去if else 判断childMenu.slideToggle();changeIcon
7、($(this););/处理横向菜单/*$(.crossMenu a).hover(function()$(this).next(ul).slideDown();,function()/但是鼠标移到子菜单，会有bug,子菜单消失/$(this).next(ul).slideUp();/首先得到子菜单var childMenu = $(this).next(ul);/解决方法，延时处理(300ms)var timeOutID = setTimeout(function()$(this).next(ul).slideUp();,300);childMenu.hover(function()/删除父
8、菜单的延时clearTimeout(timeOutID);,function()/但此时还是有问题，走了很多弯路$(this).slideUp();););*/$(.crossMenu).hover(/自己判断/function()/$(this).children(ul).slideDown();/,/function()/$(this).children(ul).slideUp();/卷帘效果function()$(this).children(ul).slideToggle();changeIcon($(this).children(a);););/*修改主菜单的指示图标*/function changeIcon(mainNode)if(mainNode)if(mainNode.css(background-image).indexOf(collapsed.gif) = 0)mainNode.css(background-image, url(resources/images/expanded.gif);else
