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%;width:10%;;">
<ul class="sub">
<li>
</li>
</ul>
</div>
<div class="banner_menu_content1" style="position:absolute;z-index: 1;left:25%;width:10%;;">
<ul class="sub">
<li>
</li>
</ul>
</div>
<div class="banner_menu_content2" style="position:absolute;z-index: 1;left:35%;width: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.结果截图
