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

灰太狼 2022-08-10 14:47 63阅读 0赞

<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代码，异步从后台取出小分类的数据，显示出来。

解释下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');
    		});

后期补效果图