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

<s:iterator value="#attr.shoponelevellist" var="list"><div class="psitem"><h3 onmouseover="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');});

后期补效果图