javascript - 相对于触发器定位隐藏/显示 div

Question

我正在努力寻找正确的 Jquery 来显示/隐藏与触发按钮平行的高度的 div。我尝试将显示/隐藏 div 向右偏移，但由于脚注出现在不同的左/右位置，因此每个脚注都会不同。相反，我需要将这些 div 放置在右侧的另一个 div 内。

我的希望是在一些文本中添加超链接脚注，这样读者就不必搜索脚注，也不会被太多的文本淹没。我希望一次打开多个脚注，但如果需要一次打开一个脚注才能正确显示，那就这样吧。

编辑:

@rohan-kumar 帮助编写了此代码

$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});

所以情况是这样的:http://jsfiddle.net/6n28t/21/

但是，我的主要问题仍然存在 - 如何使脚注与触发器出现在相同的高度？这些将是很长的文本，我希望脚注出现在与相应标记相同的高度。如何让 [2] 显示在页面的更下方？

Answer 1

所以，基本上结合其他答案会导致这个 Fiddle

Html 与您 fiddle 中的内容相同。

CSS

.wrapp{
    border:1px solid red;
    height:100%;
}

.clear{
    clear:both;
}

.footnotes div {
    position: relative;
    display: none;
}

JavaScript

$('.a_footnote').on('click',function(e){
    e.preventDefault();
    var divId=$(this).data('divid');
    var height = $(this).position().top;
    console.log(divId);
    $(".footnotes div").hide();
    $('#'+divId).toggle().css("top", height - 10);
});