在使用jquery的過程中,想取得當前點擊input的絕對位置而去顯示一個div,jquery本身提供offset和position這個兩個方法,但position官方解釋是relative to the offset parent,可以看到是針對父結點的,而offset官方解釋relative to the document,貌似使用offset可以直接絕對定位。但是在網頁中如果出現嵌套div的情況,top和left會疊加,因此這個時候如果要定位顯示一個新的div就要把父親結點的offset去掉,jquery提供了offsetParent這個方法。
因此,如下代碼可以在點擊一個控件后,在其下方顯示一個絕對定位的div。
$(
'#id'
).click(
function
(event){
var
curleft = $(event.target).offset().left;
var
curtop = $(event.target).offset().top+$(event.target).outerHeight();
var
obj = $(event.target);
obj = obj.offsetParent();
//獲取控件絕對位置
while
(obj.attr(
'tagName'
).toLowerCase() !=
'body'
){
curleft =curleft- obj.offset().left;
curtop =curtop- obj.offset().top;
obj = obj.offsetParent();
}
$(
'#div'
).css(
'top'
,curtop+
'px'
).css(
'left'
,curleft+
'px'
);
});