javascript - 相对于浏览器窗口的宽度出现的动态下拉菜单

Question

我想实现一个图标，单击该图标会在图标正下方出现一个菜单。现在，图标的水平位置可能会随着浏览器窗口宽度的不同而变化，但我希望菜单正好出现在图标下方，而不是弄乱我的整个页面布局(但只是出现在该位置的任何内容上方)，并且当用户点击屏幕上的其他地方菜单将消失。如果菜单已打开且窗口大小正在调整，菜单也应移动(而不是弄乱布局)，并保留在图标下方。
关于如何实现此类下拉菜单有什么想法吗？
或者至少我需要了解哪些 js 和 css 工具才能实现它？

Answer 1

使用此函数获取元素的位置:

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while (element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

这样使用:

var pos = getPosition(element);
var x = pos["x"];
var y = pos["y"];

您希望菜单的位置基于图标在首次创建时和浏览器调整大小时的位置:http://api.jquery.com/resize/

$( window ).resize(function() {
  //set position here
});

要使菜单不影响页面上的任何其他元素，您可以设置 position: absolute 并将其附加到正文。您可能还必须根据页面上的其他元素将 z-index 设置为某个高值

您可能也可以仅使用 html 和 css 实现此功能，尽管不确定更多浏览器可能支持 javascript。但是 css 解决方案也可能值得研究，寻找伪元素