求救一个DIV块的坐标问题，

第一种：
<html>
<head>
<title>test</title>
<script language=javascript>
    function getMenu(src,index){
        var len=document.all.childItem.length;
        for(var i=0;i<len;i++){
           document.all.childItem[i].style.display='none';
        }
        document.all.childItem[index].style.display='block';
        document.all.childItem[index].style.left=getLeft(src)+10;
        document.all.childItem[index].style.top=getTop(src)+10;
    }
function getLeft(e){
var ret=e.offsetLeft
while(e=e.offsetParent)ret+=e.offsetLeft
return ret;
}
function getTop(e){
var ret=e.offsetTop
while(e=e.offsetParent)ret+=e.offsetTop
return ret;
}
</SCRIPT>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" align="center" bgcolor="cccccc">
<tr><td>
<div align="center">
  <center>
  <table border="0" width="500" cellspacing="0" cellpadding="3" bgcolor="cccccc">
    <tr>
      <td width="250" align="center"><div id="menu" onMouseOver="getMenu(this,0)">首页</div></td>
      <td width="100" align="center"><div id="menu" onMouseOver="getMenu(this,1)">新闻</div></td>
      <td width="150" align="center"><div id="menu" onMouseOver="getMenu(this,2)">娱乐</div></td>
    </tr>
  </table>
  </center>
</div>
<div id="childItem" style="position:absolute;display:none">
   <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3">
      <tr><td>返回</tr>
      <tr><td>新闻区</td></tr>
      <tr><td>技术区</td></tr>
      <tr><td>娱乐区</td></tr>
   </table>
</div>
<div id="childItem" style="position:absolute;display:none">
    <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3">
      <tr><td>返回</td></tr>
      <tr><td>新闻区1</td></tr>
      <tr><td>技术区2</td></tr>
      <tr><td>娱乐区3</td></tr>
    </table>
</div>
<div id="childItem" style="position:absolute;display:none">
    <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3">
      <tr><td>返回</td></tr>
      <tr><td>新闻区11</td></tr>
      <tr><td>技术区21</td></tr>
      <tr><td>娱乐区31</td></tr>
    </table>
</div>
</td></tr></table>
</body></html>

解决方案 »

  1.   

    为啥document.all.childItem[index].style.left=src.offsetLeft+10;这样写不行？是不是必须要先判断src的ID之类的信息？
      

  2.   

    对不正是因为宽度不一样，所以第二种加了offsetWidth,第一种也可以一样处理：
    <html>
    <head>
    <title>test</title>
    <script language=javascript>
        function getMenu(src,index){
            var len=document.all.childItem.length;
            for(var i=0;i<len;i++){
               document.all.childItem[i].style.display='none';
            }
            document.all.childItem[index].style.display='block';
            document.all.childItem[index].style.left=event.clientX-event.offsetX+src.offsetWidth/2;
            document.all.childItem[index].style.top=event.clientY-event.offsetY+src.offsetHeight;
        }
    </SCRIPT>
    </head>
    <body>
    <table width="100%" cellpadding="0" cellspacing="0" align="center" bgcolor="cccccc">
    <tr><td>
    <div align="center">
      <center>
      <table border="0" width="500" cellspacing="0" cellpadding="3" bgcolor="cccccc">
        <tr>
          <td width="250" align="center"><div id="menu" onMouseOver="getMenu(this,0)">首页</div></td>
          <td width="100" align="center"><div id="menu" onMouseOver="getMenu(this,1)">新闻</div></td>
          <td width="150" align="center"><div id="menu" onMouseOver="getMenu(this,2)">娱乐</div></td>
        </tr>
      </table>
      </center>
    </div>
    <div id="childItem" style="position:absolute;display:none">
       <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3">
          <tr><td>返回</tr>
          <tr><td>新闻区</td></tr>
          <tr><td>技术区</td></tr>
          <tr><td>娱乐区</td></tr>
       </table>
    </div>
    <div id="childItem" style="position:absolute;display:none">
        <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3">
          <tr><td>返回</td></tr>
          <tr><td>新闻区1</td></tr>
          <tr><td>技术区2</td></tr>
          <tr><td>娱乐区3</td></tr>
        </table>
    </div>
    <div id="childItem" style="position:absolute;display:none">
        <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3">
          <tr><td>返回</td></tr>
          <tr><td>新闻区11</td></tr>
          <tr><td>技术区21</td></tr>
          <tr><td>娱乐区31</td></tr>
        </table>
    </div>
    </td></tr></table>
    </body></html>
      

  3.   

    为啥document.all.childItem[index].style.left=src.offsetLeft+10;这样写不行？是不是必须先判断src的ID等之类的信息，再明确是从menu上触发的？
      

  4.   

    使用onMouseOut    style.display="none"<html>
    <head>
    <title>test</title>
    <script language=javascript>
        function getMenu(src,index){
            var len=document.all.childItem.length;
            for(var i=0;i<len;i++){
               document.all.childItem[i].style.display='none';
            }
            document.all.childItem[index].style.display='block';
            document.all.childItem[index].style.left=event.clientX-event.offsetX+src.offsetWidth/2;
            document.all.childItem[index].style.top=event.clientY-event.offsetY+src.offsetHeight;
        }
    function hideMenu(index){
      document.all.childItem[index].style.display='none';
    }
    </SCRIPT>
    </head>
    <body>
    <table width="100%" cellpadding="0" cellspacing="0" align="center" bgcolor="cccccc">
    <tr><td>
    <div align="center">
      <center>
      <table border="0" width="500" cellspacing="0" cellpadding="3" bgcolor="cccccc">
        <tr>
          <td width="250" align="center"><div id="menu" onMouseOver="getMenu(this,0)" onMouseOut="hideMenu(0)">首页</div></td>
          <td width="100" align="center"><div id="menu" onMouseOver="getMenu(this,1)" onMouseOut="hideMenu(1)">新闻</div></td>
          <td width="150" align="center"><div id="menu" onMouseOver="getMenu(this,2)" onMouseOut="hideMenu(2)">娱乐</div></td>
        </tr>
      </table>
      </center>
    </div>
    <div id="childItem" style="position:absolute;display:none" onMouseOver="this.style.display='block'"  onMouseOut="hideMenu(0)">
       <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3" >
          <tr><td>返回</tr>
          <tr><td>新闻区</td></tr>
          <tr><td>技术区</td></tr>
          <tr><td>娱乐区</td></tr>
       </table>
    </div>
    <div id="childItem" style="position:absolute;display:none" onMouseOver="this.style.display='block'"  onMouseOut="hideMenu(1)">
        <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3" >
          <tr><td>返回</td></tr>
          <tr><td>新闻区1</td></tr>
          <tr><td>技术区2</td></tr>
          <tr><td>娱乐区3</td></tr>
        </table>
    </div>
    <div id="childItem" style="position:absolute;display:none" onMouseOver="this.style.display='block'"  onMouseOut="hideMenu(2)">
        <table class="ctable" border="0" width="120" cellspacing="0" cellpadding="3" >
          <tr><td>返回</td></tr>
          <tr><td>新闻区11</td></tr>
          <tr><td>技术区21</td></tr>
          <tr><td>娱乐区31</td></tr>
        </table>
    </div>
    </td></tr></table>
    </body></html>