ajax多级菜单栏

1.jsp

首先ajax查询数据

<script type="text/javascript">
function targetlist()
{
$.ajax({
    url:'targetlist.action?'+Math.random(),
    type:'POST', //GET
    async:true,    //或false,是否异步
    //data://提交表单数据
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr);
        console.log('发送前');
    },
    success:function(data,textStatus,jqXHR){           
        console.log(data); 
        for(var i=0;i<data.length;i++){
        $(".banner_menu_content li").append('<a href="Target.action" target="main"></a>'); //添加a标签      
        $(".banner_menu_content li a").eq(i).text("培养目标"+data[i].id.targetnumber);       
        console.log(i);
        }
        
         $(".banner_menu_content").css("height",10+30*data.length);//设定div的高度
       for(var i=$(".banner_menu_content li a").length;i>=data.length;i--){
        $(".banner_menu_content li a").eq(i).remove();//删除多余a标签 
        }   
        console.log(textStatus);
    },
    error:function(xhr,textStatus){
        console.log('错误');
        console.log(xhr);
        console.log(textStatus);
    },
    complete:function(){
        console.log('结束');
          $(".banner_menu_content li a").hover(function(){
        var aa=$(this).text().trim();          
    	setTimeout(function(){  
    	//alert(aa);           
        requirementlist(aa.substring(aa.length-1,aa.length));       
        //这里触发hover事件
    	},500);
		},function(){
    
        });		
    }
});
}

function requirementlist(number)
{
$.ajax({
    url:'requirementlist.action?'+Math.random(),
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{number:number},
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr);
        console.log('发送前');
    },
    success:function(data,textStatus,jqXHR){           
        console.log(data);
        for(var i=0;i<data.length;i++){
         $(".banner_menu_content1 li").append('<a href="" target="main"></a>');
        $(".banner_menu_content1 li a").eq(i).text("毕业要求"+data[i].id.requirementnumber);        
        console.log(i);
        }
         $(".banner_menu_content1").css("height",10+30*data.length);
         for(var i=$(".banner_menu_content1 li a").length;i>=data.length;i--){
        $(".banner_menu_content1 li a").eq(i).remove();
        }         
        console.log(textStatus);
    },
    error:function(xhr,textStatus){
        console.log('错误');
        console.log(xhr);
        console.log(textStatus);
    },
    complete:function(){
        console.log('结束');
         $(".banner_menu_content1 li a").hover(function(){
        var aa=$(this).text().trim();          
    	setTimeout(function(){   
        pointlist(aa.substring(aa.length-2,aa.length));  
        //这里触发hover事件
    	},500);
		},function(){
    
        });		
    }
});
}

function pointlist(number)
{
$.ajax({
    url:'pointlist.action?'+Math.random(),
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{number:number},
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr);
        console.log('发送前');
    },
    success:function(data,textStatus,jqXHR){           
        console.log(data);  
        for(var i=0;i<data.length;i++){
         $(".banner_menu_content2 li").append('<a href="" target="main"></a>');
        $(".banner_menu_content2 li a").eq(i).text("指标点"+data[i].id.pointnumber);        
        console.log(i);
        }
         $(".banner_menu_content2").css("height",10+30*data.length);
         for(var i=$(".banner_menu_content2 li a").length;i>=data.length;i--){
        $(".banner_menu_content2 li a").eq(i).remove();
        }         
        console.log(textStatus);
    },
    error:function(xhr,textStatus){
        console.log('错误');
        console.log(xhr);
        console.log(textStatus);
    },
    complete:function(){
        console.log('结束');
    }
});
}
  </script>

然后设定三个div

  <li class="nLi on">        
            <h3>培养过程制定</h3>
            <ul class="sub">
                <li id="banner_menu_wrap">
                <div class="banner_menu_content" style="position:absolute;z-index: 1;left:15%;10%;;">
				 <ul class="sub">				 
                <li>                 
                </li>
            	</ul>
			 	</div>
			 	<div class="banner_menu_content1" style="position:absolute;z-index: 1;left:25%;10%;;">
				 <ul class="sub">				 
                <li>               
                </li>                
            	</ul>
			 	</div>
			 	<div class="banner_menu_content2" style="position:absolute;z-index: 1;left:35%;10%;;">
				 <ul class="sub">				 
                <li>               
                </li>                
            	</ul>
			 	</div>
			 	
                <a href="Target.action"target="main">培养目标制定</a>   
                </li>
                <li><a href="Requirement.action" target="main">毕业要求制定</a></li>
                <li><a href="Termcourse.action?termcoursenumber=1" target="main">教学环节制定</a></li>
                <li><a href="Teachercourse.action" target="main" >教师权限管理</a></li>
                
            </ul>
        </li>

　控制每个div的显示与不显示

<script type="text/javascript">

    $(function(){
    $(".banner_menu_content").hide();
    $(".banner_menu_content1").hide();
    $(".banner_menu_content2").hide();
        $(".sideMenu .nLi h3").click(function(){
            if($(this).parent(".nLi").hasClass("on")){
                $(this).next(".sub").slideUp(300,function(){
                    $(this).parent(".nLi").removeClass("on");
                });
            }else{
                $(this).next(".sub").slideDown(300,function(){
                    $(this).parent(".nLi").addClass("on");
                });
            }
        });
    });
    
    $("#banner_menu_wrap").hover(function(){  
    targetlist(); //pointlist();
    $(".banner_menu_content").show();
},function(){    
    $(".banner_menu_content").hide();
});


$(".banner_menu_content li").hover(function(){       
      
		$(".banner_menu_content").show();
		$(".banner_menu_content1").show();
		},function(){    
   		 $(".banner_menu_content1").hide();
		});
 

 $(".banner_menu_content1").hover(function(){   
 console.log("qqqqqqqqqqqqqqqqqqqqq"); 

 
 
 	$(".banner_menu_content").show();
    $(".banner_menu_content1").show();
    $(".banner_menu_content2").show();
},function(){    
	$(".banner_menu_content1").hide();
    $(".banner_menu_content2").hide();
});

$(".banner_menu_content2").hover(function(){   
    $(".banner_menu_content1").show();
    $(".banner_menu_content2").show();
},function(){    
	$(".banner_menu_content").hide();
    $(".banner_menu_content1").hide();
    $(".banner_menu_content2").hide();
});

</script>

2.Struts

<package name="aaa" extends="json-default">

　　

<action name="targetlist" class="LoginAction" method="targetlist">
			<result name="success" type="json">
			<param name="root">targetlist</param>
			</result></action>
		<action name="requirementlist" class="LoginAction" method="requirementlist">
			<result name="success" type="json">
			<param name="root">requirementlist</param>
			</result></action>
		<action name="pointlist" class="LoginAction" method="pointlist">
			<result name="success" type="json">
			<param name="root">pointlist</param>
			</result></action>

3.action

 public String targetlist() throws Exception {
    	List<Teacher> teacherlist =  mgr.findTeacherByNumber(username);
    	ActionContext.getContext().getSession().put("teacherlist", teacherlist);
    	String major=teacherlist.get(0).getMajor().trim();
    	targetlist=mgr.findTargetByMajor(major);
    	return SUCCESS;
    }
    public String requirementlist() throws Exception {
    	List<Teacher> teacherlist =  mgr.findTeacherByNumber(username);
    	ActionContext.getContext().getSession().put("teacherlist", teacherlist);
    	String major=teacherlist.get(0).getMajor().trim();
    	lock.lock();
    	List<Requirement> requirementlist1;
    	requirementlist1=mgr.findRequirementByMajor(major);
    	requirementlist.clear();
    	//System.out.println(number);    	
    	for(int i=0;i<requirementlist1.size();i++){
    		if(requirementlist1.get(i).getId().getRequirementnumber().substring(0,1).equals(number.trim())){
    			requirementlist.add(requirementlist1.get(i));
    		}
    	}
    	lock.unlock();
    	//System.out.println(requirementlist.size());
    	return SUCCESS;
    }
    public String pointlist() throws Exception {
    	List<Teacher> teacherlist =  mgr.findTeacherByNumber(username);
    	ActionContext.getContext().getSession().put("teacherlist", teacherlist);
    	String major=teacherlist.get(0).getMajor().trim(); 
    	lock.lock();
    	List<Point> pointlist1;
    	pointlist1=mgr.findPointByMajor(major); 
    	//System.out.println(number);
    	pointlist.clear();
    	//System.out.print(pointlist.size()+"a   ");
    	for(int i=0;i<pointlist1.size();i++){
    		if(pointlist1.get(i).getId().getPointnumber().substring(0,2).equals(number.trim())){
    			pointlist.add(pointlist1.get(i));
    		}
    	}
    	lock.unlock();
    	//System.out.println(pointlist1.size()+"   "+pointlist.size());
    	return SUCCESS;
    }

　4.结果截图