效果：
源代码：
<html> <head> <mce:script src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script> </head> <mce:script type="text/javascript"><!-- var list1={};// var list2={}; var list3={}; function init() { $("#div_2").css("display","none"); $("#div_3").css("display","none"); $("#div_4").css("display","none"); list1=document.getElementById("div_1").getElementsByTagName("li"); list2=document.getElementById("div_2").getElementsByTagName("li"); list3=document.getElementById("div_3").getElementsByTagName("li"); } $("body").ready( function() { init(); initdiv_1(); } ); function initdiv_1() { for(var i=0;i<$("#div_1 li").size();i++) { (function(m) { list1[m].onclick = function(){ show2list(m);//显示2级菜单 } })(i); } } function initdiv_2() { for(var i=0;i<$("#div_2 li").size();i++) { (function(m) { list2[m].onclick = function(){ show3list(m);//显示3级菜单 } })(i); } } function initdiv_3() { for(var i=0;i<$("#div_3 li").size();i++) { (function(m) { list3[m].onclick = function(){ show4list(m);//显示4级菜单 } })(i); } } 初始化div_2 2级彩单 function show2list() { var num=arguments[0]; //alert(num); //$.post("url",{},function(){}) //做ajax请求数据库数据写回div_2 if((num-0)==0) { $("#div_2").html("<ul><li>a1</li><li>a2</li></ul>"); } else if((num-0)==1) { $("#div_2").html("<ul><li>b1</li><li>b2</li></ul>"); } //............ $("#div_2").css("display","inline"); //最后初始化div_2事件,绑定事件 initdiv_2(); } //初始化div_3 //3级彩单 function show3list() { var num=arguments[0]; //alert(num); //$.post("url",{},function(){}) //做ajax请求数据库数据写回div_2 if((num-0)==0) { $("#div_3").html("<ul><li>c1</li><li>c2</li></ul>"); } else if((num-0)==1) { $("#div_3").html("<ul><li>d1</li><li>d2</li></ul>"); } //............ $("#div_3").css("display","inline"); //最后初始化div_3事件,绑定事件 initdiv_3(); } //初始化div_4 //4级彩单 function show4list() { var num=arguments[0]; //alert(num); //$.post("url",{},function(){}) //做ajax请求数据库数据写回div_2 if((num-0)==0) { $("#div_4").html("<ul><li>f1</li></ul>"); } else if((num-0)==1) { $("#div_4").html("<ul><li>g1</li></ul>"); } //............ $("#div_4").css("display","inline"); } // --></mce:script> <body> <div id="div_1"> <ul id="ul_1"> <li> aa </li> <li> bb </li> </ul> </div> <div id="div_2"> </div> <div id="div_3"></div> <div id="div_4"></div> </body> </html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
