求一段JavaScript,在指定的位置，显示或隐藏某一区域

<a href="javascript:show('#MyArea')">詳細如下</a>
...
<div id="MyArea">
  希望在指定的地方表示出来
</div>
因 <a>詳細如下</a> 是动态生成的，位置不定。
要求： MyArea区域在 <a>詳細如下</a> 的相对位置下面表示出来或隐藏。
          (最好用jquery)
        

解决方案 »

  1.   

     把这一块取出来,然后js用力插到a后面.
      

  2.   

    <a href="#" onclick="javascript:show('MyArea',this)">詳細如下</a>a结构改成这样，就好计算a的位置了，要不放到href里面你要遍历页面元素找到a    function show(id, a) {
            var p = { x: a.offsetLeft, y: a.offsetTop+a.offsetHeight };
            while (a = a.offsetParent) { p.x += a.offsetParent; p.y += a.offsetTop; }
            document.getElementById(id).style.left = p.x + 'px';
            document.getElementById(id).style.top = p.y + 'px';
        }
      

  3.   

    这个要点就是获取被点击<a>的位置，给你段jquery版本的.
    html代码同3#function show(id,obj){
        var obj=$(obj);
        var position=obj.position();
        $("#"+id).css("position","absolute").css("left",position.left).css("top",position.top+obj[0].offsetHeight).css("display","");
    }
      

  4.   

     function getAbsPoint(e) // 获取dom 的坐标
    {
        var x = e.offsetLeft;
        var y = e.offsetTop;
        while(e = e.offsetParent)
        {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        return {'x': x, 'y': y};
    };先获取A标签的坐标
    设置div 绝对定位，设置div left = a标签left
    div top= a标签top +a标签offsetHeight
      

  5.   

    看看这是不是你要的效果
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title></head>
    <script type="text/javascript">
    var lastTarget = null;
    function change(evt) {
    var e = evt || window.event;
    var target = e.srcElement || e.target;
    var obj = document.getElementById("obj");
    var rect = target.getBoundingClientRect();
    obj.style.left = rect.left + "px";
    obj.style.top = rect.bottom + "px";
    if(target == lastTarget)
    obj.style.display = obj.style.display == "" ? "none" : "";
    else
    obj.style.display = "";
    lastTarget = target;
    }
    </script>
    <body>
    <div style="position:relative;left:100px;top:100px;"><a href="#" onclick="change(event)">点我</a>
    <div style="position:relative;left:100px;top:50px;"><a href="#" onclick="change(event)">点我</a></div>
    </div>
    <div style="position:absolute;left:300px;top:400px;"><a href="#" onclick="change(event)">点我</a></div>
    <div id="obj" style="position:absolute;width:100px;height:100px;border:1px gray solid;display:none;"></div>
    </body>
    </html>
      

  6.   

    function show(id,obj){
      var obj=$(obj);
      var position=obj.position();
      $("#"+id).css("position","absolute").css("left",position.left).css("top",position.top+obj[0].offsetHeight).css("display","");
      $("#"+id).show();
    }因html画面很长，可一执行这段javascript时，画面就会自动跳到最顶端。若不让画面自动跳到最顶端，而是保持不动，该如何做？
      

  7.   

    a的onclick添加return false，阻止执行href<a href="#" onclick="show('xxxxx',this);return  false">afafa</a>
      

  8.   

    用Jquery 的来说  开始div给予隐藏,单点击的时候,赋值到div 并把这个div显示出来即可.
      

  9.   

    多谢诸位，特别是whatisma，showbo两位老大。