动态下拉菜单相对于浏览器窗口的宽度显示

Dynamic Drop down menu appearing in relation to browser window's width

本文关键字：显示 窗口 下拉菜单 相对于 浏览器 动态      更新时间：2023-09-26

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

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

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 解决方案可能也值得研究，寻找伪元素

相关文章：