12

我有一个关于 jQuery offset() 函数的问题。单击电子邮件图标后，我在我的网站上使用它来显示“给朋友发送电子邮件”窗口。

但是，窗口似乎粘在浏览器窗口的右侧，而不是图标的位置。您可以在http://pec.solarismedia.net/calendarday.html上看到它的实际效果

$(".emailFriend").hide();
    $(".emailIcon").on("点击", function(e) {
        $(".emailFriend").css({
            “位置”：“绝对”，
            "左": $(this).offset().left,
            "顶": $(this).offset().top
        }).fadeIn(500);
        返回假；
    });

有一张图片显示了意图和现实之间的差异。

4

2 回答 2

16

这是因为#container有position: relative;。因此，邮箱的绝对设置是​​相对于#container 的。您必须删除该属性或使用以下内容计算 的值left：

$(this).offset().left - $('#container').offset().left
于 2012-11-19T07:18:48.127 回答
3

只是使用位置代替。.position() 方法允许我们检索元素相对于偏移父元素的当前位置。将此与 .offset() 进行对比，后者检索相对于文档的当前位置。

$(".emailFriend").insertBefore('.emailIcon').hide();
$(".emailIcon").on("click", function(e) {
    $(".emailFriend").css({
        "position": "absolute", 
        "left": $(this).position().left, 
        "top": $(this).position().top
    }).fadeIn(500);
    return false; 
});

添加了 appendTo('.userTools')。在相同位置显示的元素应该在同一个元素内。然后位置工作并且即使您更改布局也将工作。

如果您出于任何原因不想更改 dom 结构，则应使用以下内容： 

$(".emailFriend").hide();
$(".emailIcon").on("click", function(e) {
    $(".emailFriend").css({
        "position": "absolute", 
        "left": $(this).offset().left-$(".emailFriend").offsetParent().offset().left, 
        "top": $(this).offset().top-$(".emailFriend").offsetParent().offset().top
    }).fadeIn(500);
    return false; 
});
于 2012-11-19T07:38:23.463 回答