Div 使用显示功能时 Jquery 坐标会发生变化

Question

我有两个 div 单击第一个 dive 会导致第二个 div 的切换。

#a{ border:1px solid red;width:400px;margin:50px;}
#b{position:absolute;border:1px green solid; width:400px;top:150px;}

和

<div id="a">AAAAAAAAAAAA</div><div id="b">BBBBBB</div><div id="test" >Write Cordinates here</div>
$("#a").click(function(){
    var burasi = $(this).offset();
    var tepe=burasi.top + $(this).outerHeight(true);
    var ici = $("#b");
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left} );
    $("#test").html("top: "+tepe+", left: "+burasi.left);
    ici.fadeToggle("slow");       
})

As here。当 A 被点击时，切换执行得很好，但是当 div B 将要显示时，它的坐标会发生变化。我怎样才能防止它并在同一个地方制作 div B ？

Answer 1

读这个http://gabrieleromanato.name/jquery-bug-with-offsets-positioning-and-hidden-elements/

您可以通过运行在偏移前切换来避免这种情况

$("#a").click(function(){
  var burasi = $(this).offset();
  var tepe=burasi.top + $(this).outerHeight(true);
  var ici = $("#b");
  ici.fadeToggle("slow");
  ici.offset({top: tepe, left: burasi.left}); 
  $("#test").html("top: "+tepe+", left: "+burasi.left);   
});

见DEMO

Answer 2

您可以删除 ici.offset({top: tepe, left: burasi.left});，因为那是改变位置的线。在文档准备好后定位您的元素，然后它根本不会移动。当您使用实际代码时它移动的原因是因为您试图设置隐藏元素的偏移量。在 Whosebug 中查看这个答案，其中讨论了它：jquery: get the offset of hidden element

不过，正如我提到的，我使用 $(document).ready() 来修复它。这是我的代码：

    $("#a").click(function(){
    var burasi = $(this).offset();
    var tepe=burasi.top + $(this).outerHeight(true);
    var ici = $("#b");
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left} );
    $("#test").html("top: "+tepe+", left: "+burasi.left);
    ici.fadeToggle("slow");

});

随时检查它是否正常工作：http://jsfiddle.net/lrojas94/7hLypdnr/2/

Div 使用显示功能时 Jquery 坐标会发生变化

Div coordinates change when Jquery show function be used

jquery

show-hide