根据窗口中的元素位置用jquery定位弹出菜单

Question

我确信可能有人问过这个问题，但我找不到正确的解决方案..

我需要在鼠标悬停的图标上显示一个菜单，该图标可以放置在页面上的任何位置。示例代码在这里：（http://jsfiddle.net/Qfjdk/2/） 这显示了弹出窗口，但是如果我从

更改代码

#nav {
    margin:0; 
    padding:0; 
    list-style:none;
    float: left;
}   

到

#nav {
    margin:0; 
    padding:300px; 
    list-style:none;
    float: right;
}  

可以看出，菜单的位置总是在下方居中。我想根据图标的显示位置更改菜单的位置。

如果图标元素右对齐，我想将菜单定位在图标的右边缘。如果图标元素在显示页面的左下角，我希望左下角的菜单与左上角的元素等对齐。

我不是在寻找算法，我在寻找设置参数的正确方法.. 感谢您的帮助

Answer 1

我将首先定义您想要支持多少个选项（例如，4：右上角、右下角、左上角或左下角的按钮），并使用这些不同的选项创建一组类（ .pos1、.pos2、.pos3、.pos4）。

然后我会使用 JS 或 jQuery 来计算图标相对于窗口的偏移量。根据该结果，我将为弹出窗口提供您之前创建的正确类。您可以在加载时执行此操作，也可以在调整窗口大小时执行此操作。例如，计算向右的距离并应用 css 更改（您可以改为应用一个类，但这只是为了说明它是如何工作的）：

var callback = function () {

// when hover on an element, calculate offset to right

        $('.yourElement').mouseover(function(){ 
            var currentElement = $(this);
            var distanceRight = $(window).width() - ($(currentElement).offset().left + $(currentElement).width());

            // If the distance is less than 50, then do...          
            if (distanceRight < 50) {
                $('.yourPopup').css("left","-200px");
            }
            else {}
        });
    };

    $(document).ready(callback);
    $(window).resize(callback);