javascript - DNN 6 中的菜单位置困惑

Question

我的 DNN 模块有一些图像按钮，单击它们会显示子菜单。正如预期的那样，菜单的绝对位置是使用 javascript 计算的。到目前为止，这一直运行良好(在 DNN4 和 DNN5 中)。但我们注意到 DNN6 中存在一个问题。菜单位置偏离了大量像素(可能是几百个)。由于我没有写计算代码，也不是JS专家，所以无法理解DNN6是如何影响它的。这是函数:

function AbsolutePosition(obj) {
        var pos = null;
        if(obj != null) {
            pos = new Object();
            pos.top = obj.offsetTop;
            pos.left = obj.offsetLeft;
            pos.width = obj.offsetWidth;
            pos.height= obj.offsetHeight;
            obj = obj.offsetParent;
            while(obj != null) {
                pos.top += obj.offsetTop;
                pos.left += obj.offsetLeft;
                obj = obj.offsetParent;
            }
        }
return(pos);
}

我想了解此代码如何受父页面结构的影响 - 因为更改外观没有任何区别。这与页面元素的组织方式有关。

编辑:我也在寻找有关我可以尝试修改代码的建议。

任何意见表示赞赏!谢谢。

Answer 1

这与绝对定位的工作原理有关。当一个元素被绝对定位时，它的位置(由上面代码中的 top 和 left 元素表示)是相对于它最近的祖先元素 position 的。 relative 任一种风格或 absolute .在 DNN 6 中，模块包装器现在有 position: relative在它们上指定(新操作菜单用于定位)。新控制面板也可能有一些类似的更改(如果菜单不在模块中)。

您可以试试这个脚本，如果元素的位置是 absolute，它会停止爬树。或 relative :

function AbsolutePosition(obj) {
    if (!obj) {
        return null;
    }

    var pos = {
        top: obj.offsetTop,
        left: obj.offsetLeft,
        width: obj.offsetWidth,
        height: obj.offsetHeight
    },
    positionsToStopAt = {
        relative: true,
        absolute: true
    };

    obj = obj.offsetParent;
    while(obj && !positionsToStopAt[jQuery(obj).css('position')]) {
        pos.top += obj.offsetTop;
        pos.left += obj.offsetLeft;
        obj = obj.offsetParent;
    }

    return pos;
}