jquery树形菜单
来源：互联网 发布：acm算法竞赛 编辑：程序博客网 时间：2024/05/22 05:01
文件清单： menu.jsp ----菜单JSP页面 jquery.js ----JQuery源文件JS menu.js ----菜单使用的JS style.css ----菜单样式文件menu.jsp源文件，如下：<%@ pagelanguage="java" import="java.util.*"pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>JQuery[菜单效果]</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="menu.js"></script> </head> <body> <ul> <li class="mainMenu"> <a href="#">机构管理</a> <ul> <li><a href="#">添加机构</a></li> <li><a href="#">修改机构</a></li> <li><a href="#">查询机构</a></li> </ul> </li> <li class="mainMenu"> <a href="#">部门管理</a> <ul> <li><a href="#">添加部门</a></li> <li><a href="#">修改部门</a></li> <li><a href="#">查询部门</a></li> </ul> </li> <li class="mainMenu"> <a href="#">员工管理</a> <ul> <li><a href="#">添加员工</a></li> <li><a href="#">修改员工</a></li> <li><a href="#">查询员工</a></li> </ul> </li> </ul> <br/> <hr/> <br/> <ul> <li class="crossMenu"> <a href="#">机构管理</a> <ul> <li><a href="#">添加机构</a></li> <li><a href="#">修改机构</a></li> <li><a href="#">查询机构</a></li> </ul> </li> <li class="crossMenu"> <a href="#">部门管理</a> <ul> <li><a href="#">添加部门</a></li> <li><a href="#">修改部门</a></li> <li><a href="#">查询部门</a></li> </ul> </li> <li class="crossMenu"> <a href="#">员工管理</a> <ul> <li><a href="#">添加员工</a></li> <li><a href="#">修改员工</a></li> <li><a href="#">查询员工</a></li> </ul> </li> </ul> </body></html>style.css样式源文件，如下：/*菜单样式：2010-11-24*/UL,LI{ /*去掉小圆点*/ list-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{ /*取消链接的下划线*/ text-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; /*链接背景图片*/ 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 UL{ display: none;}/*横向菜单*/.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('display','block'); } else { childMenu.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($(this)); } ); //处理横向菜单 /* $('.crossMenu> a').hover( function() { $(this).next('ul').slideDown(); }, function() {//但是鼠标移到子菜单，会有bug,子菜单消失 //$(this).next('ul').slideUp(); //首先得到子菜单 varchildMenu = $(this).next('ul'); //解决方法，延时处理(300ms) vartimeOutID = setTimeout( function() { $(this).next('ul').slideUp(); },300 ); childMenu.hover( function() { //删除父菜单的延时 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')); } ); });/*修改主菜单的指示图标*/functionchangeIcon(mainNode){ if(mainNode) { if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0) { mainNode.css('background-image', 'url(resources/images/expanded.gif)'); } else { mainNode.css('background-image', 'url(resources/images/collapsed.gif)'); } }} 小结：A部分① 页面中的菜单可以通过嵌套ul和li来表示；② 菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构件多层的菜单；③ 浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进.Opera浏览器比较特殊，li的标志符号和其他浏览器不同；④ list-style属性值为none时，可以清除ul和li前的小圆点⑤ 清除子菜单的缩进值，需要padding和margin都为0，其中IE只有margin也为0时才可以清除缩进值；⑥ 可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域；⑦ 可以使用background-repeat来控制背景图的重复填充方式；⑧ 如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的；⑨ text-decoration属性值为none时，可以取消链接A文字下方的下划线；⑩ background-position可以控制背景图的位置，属性值既可以用数值，也可以使用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向；B部分 ① background-image的值为none表示没有背景图；② background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示；③ display的值为none可以用来隐藏元素；④ .mainMenu a 和 .mainMenu > a 的不同之处，前者选择使用了.mainMenu的这个class的元素内部所有的a节点，后者只选择.mainMenu的子节点中的a节点；⑤ show(),hide()方法可以用于显示或隐藏元素，没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值，或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。⑥ toggle方法更为强大，可以省去判断元素是否显示、隐藏，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show()和hide()相同；⑦ slideDown、slideUp可以实现向下或向上卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()，hide()不同；⑧ slideToggle和toggle达到类似的效果；⑨ DOCTYPE对于JQuery的动画效果是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果；⑩ Float的值为left，可以使原本各自位于一行的元素全部在一行中向左浮动；C部分① 可以给多个选择器定义同样的样式，选择器之间用，分割。同样对于JQuery的$（）方法，也可以传入多个选择器。
