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

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-