javascript - 使用 jQuery 偏移来定位 ，但看起来位置增加了

Question

我正在尝试使用下面的代码在单击事件处理程序中重新定位 div。 div 第一次显示在预期的位置 (50, 50)，但第二次显示的位置是 (100, 100)。

我想在偏移量中定义的位置显示 div(在我的应用程序中，这是通过计算完成的，为简单起见，我在这里硬编码了 (50, 50)。

$("#cd_wheredropdown").offset({ top: 50, left: 50});

我创建了一个 jsfiddle，它显示了完全相同的问题: JSfiddle

我已尽可能简化代码以隔离问题，但我不知道我做错了什么。

html:

<div id="cd_wheredropdown"></div>

<p class="cd_hasWhere">Click me</p>

CSS:

#cd_wheredropdown {
    position: absolute;
    width: 200px;
    height: 400px;
    z-index: 60;
    background-color: aqua;
    display: none;
}

j查询:

var whereDialogClass = function () {
    $(".cd_hasWhere").bind( "click", this.doOpen);
    $("#cd_wheredropdown").bind( "click", this.doClose);
}

whereDialogClass.prototype.doClose = function() {
    $("#cd_wheredropdown").fadeOut();
}

whereDialogClass.prototype.doOpen = function(event) {
    $("#cd_wheredropdown").offset({ top: 50, left: 50});
    $("#cd_wheredropdown").fadeIn();
}

var whereDialog = new whereDialogClass();

Answer 1

添加此代码会有所帮助。发生这种情况是因为当您单击一次时，它会添加 offset到 <div> ，而不是简单地设置为指定的偏移量。再次单击，您将再次重新激活该功能。

为了获得好的结果，请使用 CSS并避免使用偏移量。

whereDialogClass.prototype.doClose = function() {
    $("#cd_wheredropdown").fadeOut();
    $("#cd_wheredropdown").offset({ top: 0, left: 0}); // reposition the div
}

fiddle

虽然淡出效果看起来有点奇怪。