Javascript - 在点击的链接下方打开弹出式 div

Question

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

我有一个列表，在每个列表项中都有一个链接可以打开其他隐藏的 <div>使用以下 jQuery:

$('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 在屏幕上居中。相反，我希望它位于被点击链接的正下方。请注意，页面上可能有很多链接，一个在另一个下面，垂直距离可能不规则。我该如何实现？

Answer 1

我认为这就是您要尝试做的: http://jsfiddle.net/SO_AMK/r7ZDm/