Question

我正在尝试使用下面的代码在click事件处理程序中重新定位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;
}

jquery的：

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

虽然淡出效果似乎很少受到欢迎。

Answer 2

似乎有一个＆＃34; bug＆＃34;在offset()中，它获取元素当前位置以计算要设置的偏移量。

隐藏元素时，如display : none中所示，元素位置每次都返回到offset()，因为元素没有位置，它隐藏了，但实际上位置从顶部和左侧50px，就像第一次点击时设置的那样，所以它只是保持复合。

解决方案是仅使用css()来定位元素

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

使用jQuery偏移量来定位<div>，但看起来postion会增加

2 个答案: