获取屏幕上的元素水平位置

Question

我有这个菜单jquery函数:

$("#text").click(function(evt) {
    $("#menu").css({
        top: 45,
        left: evt.pageX
    }).toggle();
    evt.stopPropagation();
});

它工作正常,但菜单在鼠标点击正上方打开,如果我点击字母k(来自clicK),它将在K上方打开.

我希望它始终与#text div一样打开,如上图所示:

我需要改变什么？任何想法,以解决它？

https://jsfiddle.net/z4ugf5ru/

Answer 1

您应该使用offset()jq方法来获取和设置相关left属性:

$("#text").click(function(evt) {
    $("#menu").css({
        top: 45, // or not hardcoded: $(this).offset().top + 45,
        left: $(this).offset().left
    }).toggle();
    evt.stopPropagation();
});

-jsFiddle-