<%@?page?language="java"?contentType="text/html;?charset=UTF-8"?pageEncoding="UTF-8"?%>
<%
String?path?=?request.getContextPath();
String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
????<link?href="css/common.css"?rel="stylesheet"/>
????<link?href="css/style.css"?rel="stylesheet"/>
????<script?type="text/javascript"?src="js/jquery-1.8.0.js"></script>
?<!--???<script?type="text/javascript"?src="js/script.js"></script>-->??
</head>
<body>
????<!--header-->
????<div>
????????<!--top-->
????????<div>
????????????<img?src="images/logo.png"?alt=""/>
????????????<img?src="images/title_logo.png"?alt=""/>
????????????<div>
????????????????<span>系統(tǒng)管理員(Admin)</span>
????????????????<a?href="#"?target="_blank"><img?src="images/user_icon.png"?alt=""/>
????????????????????<span>3</span>
????????????????</a>
????????????????<a?href="#"?target="_blank"><img?src="images/fit_icon.png"?alt=""/></a>
????????????????<a?href="#"?target="_blank"><img?src="images/exit_icon.png"?alt=""/>?</a>
????????????</div>
????????</div>
????????<!--top?end-->
????????<!--menu-->
????????????<div?id="menu">
????????????????<ul?id="aa">
????????????????
????????????????</ul>
????????????</div>
????????<!--menu?end-->
????????<!--nav-->
????????????<div>
????????????????<img?src="images/front_icon.png"?alt=""/>
????????????????<ul>
????????????????????<li?id="bb"></li>
????????????????</ul>
????????????</div>
????????<!--nav?end-->
????????<p></p>
????????<!--bread_map-->
????????<div>
????????????<h4>當(dāng)前位置：</h4>
????????????<ul>
????????????????<li><a?href="#">調(diào)度基礎(chǔ)數(shù)據(jù)</a><span>></span></li>
????????????????<li><a?href="#">調(diào)度基礎(chǔ)數(shù)據(jù)庫</a><span>></span>?</li>
????????????????<li><a?href="#">電網(wǎng)</a><span>></span></li>
????????????????<li><a?href="#">總調(diào)直調(diào)電網(wǎng)</a><span>></span></li>
????????????????<li><a?href="#">變電站</a><span>></span></li>
????????????????<li><a?href="#">500kV海港變電站</a><span>></span></li>
????????????</ul>
????????</div>
????????<!--bread_map?end-->
????</div>
????<div>
????</div>
????<div>
????</div>
????<input?type="text"?value="<%=basePath?%>"?style="display:none"?id="acc"/>
????<!--footer?end-->
</body>
<script?type="text/javascript">
????????var?path?=?document.getElementById("acc").value;
????????var?dd?=?0;
????????function?GetXHR(){
????????????var?xhr?=?null;
????????????if(window.XMLHttpRequest){
??????????????xhr?=?new?window.XMLHttpRequest();
????????????}else?if(window.ActiveXObject){
??????????????xhr?=?new?window.ActiveXObject();
????????????}
????????????return?xhr;
????????}
????????window.onload?=?function(){
??????????var?xhr?=?GetXHR();
??????????xhr.onreadystatechange?=?function(){
??????????????if(xhr.readyState?==?4?&&?xhr.status?==?200){
??????????????????var?jay?=?eval(xhr.responseText);
??????????????????var?a?=?document.getElementById("aa");
??????????????????for(var?i=0;i<jay.length;i++){
?????????????????????a.innerHTML?+=?"<li??id='"+jay[i].MENU_ID+"'?onclick='show(this);'?onmouseover='subshow(this);'?onmouseout='subhide(this);'><a?href='#'>"+jay[i].MENU_NAME+"</a></li>";
??????????????????}
??????????????}
??????????}
??????????xhr.open("POST",path+"get",true);
??????????xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
??????????xhr.send("op=CDTree/getCDTree&id="+"b62830d9-26d8-4614-a5e9-f202bdb91a2a");
????????}
????????function?show(li){
????????????var?id?=?li.id;
????????????var?xhr?=?GetXHR();
????????????xhr.onreadystatechange?=?function(){
????????????????if(xhr.readyState?==?4?&&?xhr.status?==?200){
????????????????????var?jay?=?eval(xhr.responseText);
????????????????????var?a?=?document.getElementById("bb");
????????????????????a.innerHTML?=?"";
????????????????????for(var?i?=0;i<jay.length;i++){
????????????????????????a.innerHTML?+=?"<a?href='#'>"+jay[i].NAME+"</a>";
????????????????????}
????????????????}
????????????}
????????????xhr.open("POST",path+"get",true);
????????????xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
????????????xhr.send("op=CDTree/showLJ&id="+id);
????????}
????????function?subshow(li){
???????????if(dd>0){
???????????}else{
??????????????var?id?=?li.id;
??????????????var?xhr?=?GetXHR();
??????????????xhr.onreadystatechange?=?function(){
??????????????????if(xhr.readyState?==?4?&&?xhr.status?==?200){
??????????????????????var?jay?=?eval(xhr.responseText);
??????????????????????var?a?=?document.getElementById(id);
??????????????????????if(jay.length?>?0){
??????????????????????????var?ul?=?document.createElement("ul");
??????????????????????????ul.id?=?id+"1";
??????????????????????????a.appendChild(ul);
?????????????????????????//?alert(1);
??????????????????????????for(var?i?=?0;?i<jay.length;i++){
??????????????????????????????document.getElementById(ul.id).innerHTML?+=?"<li??id='"+jay[i].ID+"'?onclick='show(this);'?onmouseover='subshow(this);'?onmouseout='subhide(this);'?><a?href='#'>"+jay[i].NAME+"</a></li>";
??????????????????????????????
??????????????????????????}
??????????????????????????document.getElementById(ul.id).style.display?=?"block";
??????????????????????}
??????????????????}
??????????????}
??????????????xhr.open("POST",path+"get",true);
??????????????xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
??????????????xhr.send("op=CDTree/subCD&id="+id);
??????????????dd?=?1;
????????????}??
????????}
????????function?subhide(li){
????????????if(dd>0){
?????????????????var?submenu?=?li.getElementsByTagName("ul")[0];
?????????????????if(submenu){
?????????????????????li.removeChild(submenu);
?????????????????}
????????????}
????????????dd?=?0;
????????}
????????
????????
????</script>
????
</html>
菜單的第一級也是通過ajax獲取的，需要樣式也發(fā)過來嗎？
動態(tài)加載li下的ul中的li，li之間的間隔怎么消除，在CSS里寫的好像沒用？
滅世小惡魔
2016-05-20 17:19:09
