js中下拉菜单问题求助了

由于刚学js,不少例子中语句看不明白，向各位请教了。js代码中注有？？？？？号的地方<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Sample</title>
<style type="text/css">
<!--
#mainNav {
position: absolute;
top:2px;
height:30px;
width:800px;
}
.mainItem {
position: absolute;
top:3px;
height:27px;
width:74px;
padding:10px 0px;
margin:0px;
text-align:center;
font-size:13px;
background-image: url(images/tab1.gif);
background-repeat:repeat-x;
}
.subItemNav {
position: absolute;
top: 30px;
left: 0px;
width: 100%;
height: 20px;
padding: 2px 0px 0px 100px;
visibility: hidden;
background-color:#61B38B;
}
.subItemNav a:link, .subItemNav a:visited {
font-size: 80%;
color: #ffffff;
}
.subItemNav a:hover {
color: #cccccc;
}
</style>
</head><body onmousemove="closeAllSubItem(event);">
<div id="headerNav">
      <div id="mainNav">
                <div id="mainItem1" class="mainItem"
                         onmouseover="displaySubItem(this);">开发王</div>
                <div id="mainItem2" class="mainItem"
                         onmouseover="displaySubItem(this);">最佳拍档</div>
                <div id="mainItem3" class="mainItem"
                         onmouseover="displaySubItem(this);">Flash</div>
                <div id="mainItem4" class="mainItem"
                         onmouseover="displaySubItem(this);">简体中文</div>
                <div id="mainItem5" class="mainItem"
                         onmouseover="displaySubItem(this);">繁体中文</div>
                <div id="mainItem6" class="mainItem"
                         onmouseover="displaySubItem(this);">其它语言</div>
      </div>    
      <div id="subMenu1" class="subItemNav">
        <a href="#">HTML</a> | 
        <a href="#">CSS</a> | 
        <a href="#">JavaScript</a> | 
        <a href="#">ASP</a> | 
        <a href="#">ASP.NET(VB)</a> | 
        <a href="#">ASP.NET(C#)</a> | 
        <a href="#">JSP</a> | 
        <a href="#">PHP</a>
      </div>
      <div id="subMenu2" class="subItemNav">
        <a href="#">HTML/CSS/JavaScript</a> | 
        <a href="#">ASP</a> | 
        <a href="#">ASP.NET(VB)</a> | 
        <a href="#">ASP.NET(C#)</a> | 
        <a href="#">JSP</a> | 
        <a href="#">PHP</a>
      </div>
      <div id="subMenu3" class="subItemNav">
        <a href="#">动画王</a> | 
        <a href="#">开发王</a> | 
        <a href="#">FMS</a> | 
        <a href="#">Flash Player：The Missing Manual</a> | 
        <a href="#">ASP.NET for Flash</a> | 
        <a href="#">ASP for Flash</a> | 
        <a href="#">JSP for Flash</a> | 
        <a href="#">PHP for Flash</a>
      </div>
     
      <div id="subMenu4" class="subItemNav">
        <a href="#">some link</a> | 
        <a href="#">some link</a> 
      </div>
      <div id="subMenu5" class="subItemNav">
        <a href="#">some link</a> | 
        <a href="#">some link</a> 
      </div>
      <div id="subMenu6" class="subItemNav">
        <a href="#">some link</a> | 
        <a href="#">some link</a> 
      </div>     
</div>
<br /><br /><br /><br />
<script type="text/javascript">
// =========================[01]=========================
// 初始化，
// 变量totalItems表示共有多少个主菜单项
var totalItems = 6;
function init(){ 
   for (var i=1; i<= totalItems; i++){
      // 获取所有子菜单项div元素，并设置其样式
      var oSubItem = document.getElementById("subMenu"+i);//注意括号中获取不同子菜单div的做法
      oSubItem.style.visibility = "hidden" //默认开始时全部子菜单都是隐藏的
      // 获取所有主菜单项div元素，并设置其样式，主要就是初始化定位
      var oMainItem = document.getElementById("mainItem"+i);//注意括号中获取不同主菜单div的做法
      oMainItem.style.left = 74*i+"px"; //设置主菜单初始状态的样式,注意相间同样距离的不同项的设置74*i，其中i是项目顺序。
   }
}
init();
// =========================[02]=========================
// 鼠标指针移到主菜单项上方，触发该函数
// 该函数重新设置主菜单项和子菜单项
function displaySubItem(theobj){
   for (var i=1; i<= totalItems; i++){
 //   var oSubItem = document.getElementById("subMenu"+i);//获取各个子菜单项 这个注释掉也行???????
    //  oSubItem.style.visibility = "hidden"; 这个设置隐藏的样式我觉得没必要了，初始是隐藏的，新样式在后面几句设置??????????
      var oMainItem = document.getElementById("mainItem"+i);
      oMainItem.style.backgroundImage = "url(images/tab1.gif)";
   }
   var mainItemIndex =
                   theobj.getAttribute("id").toString().substring(8);//分别是获取属性函数，返回字符函数，提前字符函数（start,stop）
    ////
  var oSubItem = document.getElementById("subMenu"+mainItemIndex); ////stop可省略。这两句话怎么解析呢？？？？什么意思呢？126中的有何不同呢？
   oSubItem.style.visibility="visible"; //显示子菜单行
  theobj.style.backgroundImage = "url(images/tab2.gif)";//改变主菜单项的背景
}
// =========================[03]=========================
// 鼠标指针移动时，触发该函数
// 注意对象变量scopeY用于定义垂直方向上的范围，这里是从5-60
// 表示主菜单项和子菜单项的范围
// 该函数检查鼠标指针是否超出这个范围，从而重新设置子菜单项
function closeAllSubItem(event){
   var scopeY = {top:5,bot:60};
   window.status=event.clientY;
   if ((event.clientY<scopeY.top)||(event.clientY>scopeY.bot)){
       for (var i=1; i<= totalItems; i++){
         var oSubItem = document.getElementById("subMenu"+i);
         oSubItem.style.visibility = "hidden";
      }  
   }
}
</script></body>

解决方案 »

  1.   

    我刚刚写了一个jquery版本的下拉菜单，你可参考一下！http://www.scscms.com/article/2012-8/2312396073.html建议你的结构要改一下，js写简单一点。
      

  2.   

    刚开始学习...而且jquery还没接触。你给的网页打不开....
    我代码中:
     var mainItemIndex =theobj.getAttribute("id").toString().substring(8);//这里为什么是8做参数也不明白，这两句话的获取搞不明            
      var oSubItem = document.getElementById("subMenu"+mainItemIndex);      
      

  3.   

    var mainItemIndex =  //设置mainItemIndex变量等于
    theobj.getAttribute("id").toString().substring(8) //获取 theobj的id名称并转换成字符串，最后取字符串的第7位及以后的所有字符（因为是从0算起的，详情查百度）。
    var oSubItem = document.getElementById("subMenu"+mainItemIndex);//其实就是获取ID，只不过动态获取。换句话就是mainItemIndex是会变化的。
      

  4.   

    还有我发现去掉"toString()"这个函数也行的。
    看来这些函数的运用真的多点写多点接触啊