javascript - 根据窗口中的元素位置使用 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);