我想把它改成三级的
但是菜单1打开后再也无法用向下的方向键使菜单2获得焦点了
浪尖帮我实现菜单2和菜单3获得焦点可以吗?
<html>
<head>
<title>键盘控制菜单</title>
<style type="text/css">
input {border:1px solid #fff; background:#fff; }
input {star : expression(
onmouseover=function(){this.style.backgroundColor="#eee"},
onmouseout=function(){this.style.backgroundColor="#fff"})}
.in40 {width:40px;}
.in80 {width:80px;}
.in120 {width:120px;}
.in200 {width:200px;}
</style>
<script defer>
var root=["a1","a2","a3"];
var a1=["a11","a12"];
var a2=["a21","a22"];
var a3=["a3.1","a3.2"];
var a11=["a111","a112"];
var a12=["a121","a122"];
var obj=document.getElementsByTagName("input");
var urlpath = "";
for(var i=0;i<obj.length;i++){
 if(obj[i].input){
  obj[i].focus();
  break;
 }
}
document.onkeydown=function(){
 try{
  if(event.keyCode==13){
   window.open(urlpath);
  }
  if(event.keycode == 27){
   window.closed();
  }
  if(event.keyCode==40){//下
   if(event.srcElement.菜单){
    if(document.getElementById(event.srcElement.菜单).style.display=="block"){
     var arr=eval(event.srcElement.name);
     document.getElementsByName(arr[0])[0].focus();
    }else{
     var parentMenu=event.srcElement.parentMenu;
     var selfName=event.srcElement.name;
     var arr=eval(event.srcElement.parentMenu);
     var n;
     for(var i=0;i<arr.length;i++){
      if(arr[i]==selfName){ 
       n=i;
       break;//跳出进入if(n!=arr.length-1)
      }
     }
     if(n!=arr.length-1){
      document.getElementsByName(arr[n+1])[0].focus();
     }
    }
   }else{
    var parentMenu=event.srcElement.parentMenu;
    var selfName=event.srcElement.name;
    var arr=eval(parentMenu);
    var n;
    for(var i=0;i<arr.length;i++){
     if(arr[i]==selfName){
      n=i;
      break;
     }
    }
    if(n!=arr.length-1){
     document.getElementsByName(arr[n+1])[0].focus();
    }else{
     selfName=parentMenu;
     parentMenu=document.getElementsByName(parentMenu)[0].parentMenu;
     var arr=eval(parentMenu);
     var n;
     for(var i=0;i<arr.length;i++){
      if(arr[i]==selfName){
       n=i;
       break;
      }
     }
     if(n!=arr.length-1){
      document.getElementsByName(arr[n+1])[0].focus();
     }
    }
   }
  }
  else if(event.keyCode==38){//上
   var parentMenu=event.srcElement.parentMenu;
   var selfName=event.srcElement.name;
   var arr=eval(event.srcElement.parentMenu);
   var n;
   for(var i=0;i<arr.length;i++){
    if(arr[i]==selfName){
     n=i;
     break;
    }
   }
   if(n>0){
    var preMenu=document.getElementsByName(arr[n-1])[0];
    if(preMenu.菜单){
     var preSubDiv=document.getElementById(preMenu.菜单);
     if(preSubDiv.style.display=="none"){
      preMenu.focus();
     }else{
      var preSubArr=eval(arr[n-1]);
      var focusMenu=document.getElementsByName(preSubArr[preSubArr.length-1])[0];
      focusMenu.focus();
     }
    }else{
     preMenu.focus();
    }
   }else{
    if(parentMenu!="root"){
     document.getElementsByName(parentMenu)[0].focus();
    }
   }
  }
  else if(event.keyCode==37){//左
   if(event.srcElement.菜单){
    document.getElementById(event.srcElement.菜单).style.display="none";
   }
  }
  else if(event.keyCode==39){//右
   if(event.srcElement.菜单){
    document.getElementById(event.srcElement.菜单).style.display="block";
    } 
  }
 }catch(e){
 }
}function url(obj){
urlpath =obj.value;
}
</script>
</head>
<body onload="document.all.a1.focus()">
键盘控制菜单演示:
<div style="position:absolute;left:10px;top:50px">
<input type=text name="a1" class="in200" 菜单="菜单1" parentMenu="root" value="菜单1" onfocus="this.select();url(this)" size="40" readonly="readonly"><br/>
<div id="菜单1" style="display:none">
<input type=text name="a11" class="in200" 菜单="菜单1.1" parentMenu="a1" class="in80" value="    菜单1.1" onfocus="this.select();url(this)" readonly="readonly"><br/>
<div id="菜单1.1" style="display:none">
<input type=text name="a111"  parentMenu="a11" class="in80" value="菜单1.1.1" onfocus="this.select();url(this)"readonly="readonly"><br/>
<input type=text name="a112"  parentMenu="a11" class="in80" value="菜单1.1.2" onfocus="this.select();url(this)" readonly="readonly">
</div>
<input type=text name="a12"   菜单="菜单1.2" parentMenu="a1" class="in200" value="    菜单1.2" onfocus="this.select();url(this)" readonly="readonly"><br/>
<div id="菜单1.2" style="display:none">
<input type=text name="a121"  parentMenu="a12" class="in80" value="菜单1.2.1" onfocus="this.select();url(this)"readonly="readonly"><br/>
<input type=text name="a122"  parentMenu="a12" class="in80" value="菜单1.2.2" onfocus="this.select();url(this)" readonly="readonly">
</div>
</div><input type=text name="a2" class="in200" 菜单="菜单2" parentMenu="root" value="菜单2" onfocus="this.select();url(this)" size="40" readonly="readonly"><br/>
<div id="菜单2" style="display:none">
<input type=text name="a21" parentMenu="a2" class="in80" value="    菜单2.1" onfocus="this.select();url(this)" readonly="readonly"><br/>
<input type=text name="a22" parentMenu="a2" class="in80" value="    菜单2.2" onfocus="this.select();url(this)" readonly="readonly">
</div>
<input type=text name="a3" class="in200" 菜单="菜单3" parentMenu="root" value="菜单3" onfocus="this.select();url(this)" size="40" readonly="readonly">
<div id="菜单3" style="display:none">
<input type=text name="a31" parentMenu="a3" class="in80" value="    菜单3.1" onfocus="this.select();url(this)" readonly="readonly"><br/>
<input type=text name="a32" parentMenu="a3" class="in80" value="    菜单3.2" onfocus="this.select();url(this)" readonly="readonly">
</div>
</div>
</body>
</html>