javascript - 避免 Dijit 菜单与其目标 div 之间重叠

Question

我在fiddle.net here中有以下代码示例一个 Dijit.Menu 和一个 div。 左键单击会出现菜单，我的问题是菜单重叠(或覆盖、隐藏)目标 div 的内容，并且用户在与菜单中呈现的替代方案进行比较时无法读取其内容，请参见下图。

那么有没有办法让Menu出现时不与div内容重叠，这样浏览菜单项的时候就能看到div内容，也许可以将menu定位在div的下方或上方，如下图。

Answer 1

这可以通过附加到 onOpen 事件(当弹出菜单显示时触发)的一些 JavaScript 来实现。

代码应获取单击元素的位置和高度，并计算菜单应放置的位置:

• x:触发元素的x位置
• y:y位置与触发元素的高度之和

使用这些坐标设置弹出菜单支架元素的左侧和顶部样式属性:

pMenu.connect(pMenu, 'onOpen', function () {
    var position = dojo.position(this.currentTarget, true);   
    domStyle.set(this.domNode.parentNode, {
       left: position.x + "px",
       top: (position.y + position.h) + "px"
    });
});

这是一个jsfiddle with the popup menu positioned as in your image