完美实现淘宝易迅左边菜单树，鼠标over事件显示菜单内容

<s:iterator value="#attr.shoponelevellist" var="list">
								<div class="psitem">
									<h3 οnmοuseοver="showsChild(this,${list.id});">${list.name}</h3>
									<div class="item-list clear">
										<div class="subitem">
											<dl class="sort1 clear">
												<dd></dd>
											</dl>
										</div>
									</div>	
								</div>
							</s:iterator>

迭代后台取出的大分类的数据，显示给JSP页面，就是左边菜单中开始显示的分类，下面给出后台取出数据的代码。

List shoponelevellist = pointshopservice.findSolByid(shopnameid);
		session.put("shoponelevellist",shoponelevellist);

JS代码，异步从后台取出小分类的数据，显示出来。

function showsChild(t,id) {
				if($(t).next().find("dd").html().length<1) {
				 	$.getJSON("<%=path%>/PointShopAction!showChild",
						 {pid:id},
						 function(data){	
								var childsHtml = " ";
								for(var i=0;i<data.ShoponelevelList.length;i++) {
									childsHtml += "<em>"+ data.ShoponelevelList[i].name +"</em>";
								}
								$(t).next().find("dd").html(childsHtml) ;
						}
					);
				}
			}

解释下if($(t).next().find("dd").html().length<1) ，这段代码实现当该大类的子类都被加载出来之后，鼠标放上去不会在走JS方法showsChild(this,${list.id})，也相当于不会向数据库中读取相同的数据，这样会减少对数据库的读取，否则鼠标随意在上面移动每次onmouseover将对数据库进行读取一次，将很大程度的加大对系统的压力和对数据库的承载，只需读取第一次，读取出来的数据将会保留在页面，可直接显示。

/**
	 * 显示商品分类子类
	 */
	public void showChild() {
		
		List<Shoponelevel> list = service.findByPid(pid);
		try {
			Util.printResult(response, JsonUtil.ListToJson(list)); //把list数据封装成json数据
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

/**
	 * List集合转化为String
	 */
	public static Object lListToJson(
			List List) {
		String jsonStr = null;
		StringBuffer strBuffer = new StringBuffer();
		strBuffer.append("{");
		strBuffer.append("\"ShoponelevelList\":[");
		for (int i = 0; i < ShoponelevelList.size(); i++) {
			Shoponelevel temp = ShoponelevelList.get(i);
			strBuffer.append("{");
			strBuffer.append("\"id\":\"");
			strBuffer.append(temp.getId());
			strBuffer.append("\",");

			strBuffer.append("\"name\":\"");
			strBuffer.append(temp.getName());
			strBuffer.append("\",");

			strBuffer.append("\"sortnum\":\"");
			strBuffer.append(temp.getSortnum());
			strBuffer.append("\"");

			if (i < ShoponelevelList.size() - 1) {
				strBuffer.append("},");
			} else {
				strBuffer.append("}");
			}
		}
		strBuffer.append("]"); 
		strBuffer.append("}");
		jsonStr = strBuffer.toString();
		return jsonStr;
	}

样式显示JS

$('.catalog >.psitem-box> .psitem').hover(function(){
	
			var eq = $('.catalog > .psitem-box > .psitem').index(this),				//获取当前滑过是第几个元素
				h = $('.catalog').offset().top,						//获取当前下拉菜单距离窗口多少像素
				s = $(window).scrollTop(),									//获取游览器滚动了多少高度
				i = $(this).offset().top,									//当前元素滑过距离窗口多少像素
				item = $(this).children('.item-list').height(),				//下拉菜单子类内容容器的高度
				sort = $('.catalog').height();						//父类分类列表容器的高度
			
			if ( item < sort ){												//如果子类的高度小于父类的高度
				if ( eq == 0 ){
					$(this).children('.item-list').css('top', (i-h));
				} else {
					$(this).children('.item-list').css('top', (i-h)+1);
				}
			} else {
				if ( s > h ) {												//判断子类的显示位置，如果滚动的高度大于所有分类列表容器的高度
					if ( i-s > 0 ){											//则 继续判断当前滑过容器的位置 是否有一半超出窗口一半在窗口内显示的Bug,
						$(this).children('.item-list').css('top', (s-h)+2 );
					} else {
						$(this).children('.item-list').css('top', (s-h)-(-(i-s))+2 );
					}
				} else {
					$(this).children('.item-list').css('top', 3 );
				}
			}	

			$(this).addClass('hover');
			$(this).children('.item-list').css('display','block');
		},function(){
			$(this).removeClass('hover');
			$(this).children('.item-list').css('display','none');
		});

后期补效果图