请好心的朋友们帮我看看这个程序应怎么写，我的问题是如何能根据点击当前的链接动态算出菜单出现的位置，谢谢大家了。

<html>
<script language="JavaScript">
<!--
var s = 0;
function show()
{
if(s % 2 == 0)
{
document.all.menu.style.display = '';
document.all.menu.style.left = event.x;
document.all.menu.style.top = event.y;
}
else
{
document.all.menu.style.display = 'none';
}
s +=1;
}//-->
</script>
<body>
<div id="menu" style="position:absolute;left:0px;top:0px;display:none">
  <p>menuitem1</p>
  <p>menuitem2</p>
  <p>menuitem3</p>
</div>
<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2">
<p>
  这里的文字可能会比较多，一行一行的逐渐拉长<br>
      这里的文字可能会比较多，一行一行的逐渐拉长<br>
      这里的文字可能会比较多，一行一行的逐渐拉长<br>
      这里的文字可能会比较多，一行一行的逐渐拉长<br>
      这里的文字可能会比较多，一行一行的逐渐拉长
</p>
    </td>
  </tr>
  <tr>
    <td width="50%">&nbsp;</td>
    <td width="50%" height="50" valign="bottom"><span style="cursor:hand;" id="sp" onclick="show()">点击当前文字则出现菜单</span></td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    楼上兄弟谢谢你，但是你写的这个我也考虑过了，不是很合适document.all.menu.style.left = event.x;
    document.all.menu.style.top = event.y;
    问题出在取的是当前鼠标点击的位置，我是想以当前文字所在的单元格的位置下方出现
      

  2.   

    如果我将要点击出现菜单的文字用div或者span包住，能动态取到当前这个div或者span的位置吗
      

  3.   

    <html>
    <script language="JavaScript">
    <!--var s = 0;function getoffset(e)
    { 
    var t=e.offsetTop; 
    var l=e.offsetLeft; 
    while(e=e.offsetParent)
    { 
    t+=e.offsetTop; 
    l+=e.offsetLeft; 
    } 
    var rec = new Array(1);
    rec[0]  = t;
    rec[1] = l; return rec
    } function show(obj)
    {
    if(s % 2 == 0)
    {
    var a = getoffset(obj); document.all.menu.style.display = '';
    document.all.menu.style.left = a[1];
    document.all.menu.style.top = a[0] + obj.offsetHeight;
    }
    else
    {
    document.all.menu.style.display = 'none';
    }
    s +=1;
    }//-->
    </script>
    <body>
    <div id="menu" style="position:absolute;left:0px;top:0px;display:none">
      <p>menuitem1</p>
      <p>menuitem2</p>
      <p>menuitem3</p>
    </div>
    <table width="500" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">
    <p>
      这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长
    </p>
        </td>
      </tr>
      <tr>
        <td width="50%">&nbsp;</td>
        <td width="50%" height="50" valign="bottom"><span style="cursor:hand;" id="sp" onclick="show(this)">点击当前文字则出现菜单</span></td>
      </tr>
    </table>
    </body>
    </html>
      

  4.   

    <html>
    <body>
    <div id="menu">
      <p>menuitem1</p>
      <p>menuitem2</p>
      <p>menuitem3</p>
    </div>
    <table width="500" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">
    <p onclick="changeMenuDivPosition(this);">
      这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长
    </p>
        </td>
      </tr>
      <tr>
        <td width="50%" onclick="changeMenuDivPosition(this);">&nbsp;dddd</td>
        <td width="50%" height="50" valign="bottom"><span style="cursor:hand;" id="sp" onclick="changeMenuDivPosition(this);">点击当前文字则出现菜单</span></td>
      </tr>
    </table><div id=menuDiv style="background-color:cccccc;width:300;height:200;position:absolute;z-index:10;">菜单层</div>
    </body>
    </html>
    <script language=javascript >
    function changeMenuDivPosition(obj)
    {
      menuDiv.style.top=getOffsetTopToBody(obj)+obj.offsetHeight;
      menuDiv.style.left=getOffsetLeftToBody(obj);
    }function getOffsetTopToBody(obj)
    {  var offsetTopToBody=obj.offsetTop;
      var theOffsetElement=obj;
      while(theOffsetElement=theOffsetElement.offsetParent)
        offsetTopToBody+=theOffsetElement.offsetTop;
      return offsetTopToBody;
    }function getOffsetLeftToBody(obj)
    {
      var offsetLeftToBody=obj.offsetLeft;
      var theOffsetElement=obj;
      while(theOffsetElement=theOffsetElement.offsetParent)
        offsetLeftToBody+=theOffsetElement.offsetLeft;
      return offsetLeftToBody;
    }
    </script>
      

  5.   

    <html>
    <script language="JavaScript">
    <!--
    var s = 0;
    function show(obj)
    {
    oRect = obj.getBoundingClientRect();
    if(s % 2 == 0)
    {
    document.all.menu.style.display = '';
    document.all.menu.style.left = oRect.left;
    document.all.menu.style.top = oRect.top;
    }
    else
    {
    document.all.menu.style.display = 'none';
    }
    s +=1;
    }//-->
    </script>
    <body>
    <div id="menu" style="position:absolute;left:0px;top:0px;display:none">
      <p>menuitem1</p>
      <p>menuitem2</p>
      <p>menuitem3</p>
    </div>
    <table width="500" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">
    <p>
      这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长<br>
          这里的文字可能会比较多，一行一行的逐渐拉长
    </p>
        </td>
      </tr>
      <tr>
        <td width="50%">&nbsp;</td>
        <td width="50%" height="50" valign="bottom"><span style="cursor:hand;" id="sp" onclick="show(this)">点击当前文字则出现菜单</span></td>
      </tr>
    </table>
    </body>
    </html>  
      

  6.   

    自己再按要求在script里加个初始值就行了
      

  7.   

    谢谢大家的热心帮助再问一下程序中的变量s是起到什么作用的？getBoundingClientRect()这个方法是做什么的，有没有功能的说明？感谢大家!
      

  8.   

    我明白了，是点击的次数控制菜单的显示隐藏，呵呵，犯傻了：）不过getBoundingClientRect()我从来没有用过，麻烦谁能给说明一下
      

  9.   

    getBoundingClientRect Method  Internet Development Index --------------------------------------------------------------------------------Retrieves an object that specifies the bounds of a collection of TextRectangle objects. SyntaxoRect = object.getBoundingClientRect()
    Return ValueReturns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.ResThis method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft&reg; Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.