1

抱歉标题不清楚，我无法制定更好的简洁解释。

我有一个列表，每个列表项中都有一个链接，该链接<div>使用以下 jQuery 打开一个隐藏的 othersiwse：

$('a.showreranks').click(function () {
        $('body').append('<div class="overlay"></div>');
        $('#rerank_details').slideToggle(300);
        return false;
      });

rerank_details是 div 的 id 并且showreranks是所有链接的类。

这是 div 的 CSS：

#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}

所以，你看，打开的 div 在打开时是居中的。然后它会填充与单击的列表项相关的信息，但您无需担心。我需要以下帮助 - 我不希望 div 居中在屏幕上。相反，我希望它位于被点击链接的正下方。请注意，页面上可能有很多链接，一个在另一个之下，垂直距离可能不规则。我该如何做到这一点？

4

3 回答 3

3

我认为这就是你想要做的：http: //jsfiddle.net/SO_AMK/r7ZDm/

于 2012-06-21T17:21:03.353 回答
2

答案已经被接受，但也许这是一个更干净的版本。动画都是固定的。

于 2012-06-21T17:45:21.313 回答
1

如果它不必在 DOM 的正常流程中，只需使用绝对定位和事件对象。

function(event){
  var box = //get a handle to box
  box.style.position = 'aboslute';
  box.style.left = event.page.x; 
  box.style.top = event.page.y;
}
于 2012-06-21T17:15:33.587 回答