javascript - 如何在画廊 View 中的一系列动态 div 中使用 Jquery 更改最后一个弹出窗口(动态)的位置

Question

这里的情况很有趣。一个我有点难过。我们在此页面上有一个动态的水平画廊列表，其中一个选项是单击齿轮图标时弹出的操作菜单(下图)。然而，最后一个元素的弹出窗口朝向屏幕边缘并且实际上不可读(边缘被切断，链接中断到第二行)。我想选择最后一个 div 并更改弹出窗口的位置(如果它是最后一个)但是菜单是动态的并且它已经使用 JS 定位(附有其他屏幕截图)。希望这是足够的信息。下面的代码片段。本菜单也与 TableView 共享。谢谢

    $galleryCont.on('mouseover','.galleryItem',function(e){
    $(this).find('.orderActionsLink').show();

    }).on('mouseout','.galleryItem',function(e){
                $(this).find('.orderActionsLink').hide();
    });

        //Hides Actions Menu on scroll
           $galleryCont.scroll(function() {
           $('.actionsTableCont').hide();
     });

Answer 1

我会使用 jquery 的 position() 获取元素的位置，然后使用 jquery 的 width() 获取元素的宽度。

根据这些值，您可以计算元素的右边缘是否超出页面(超过视口(viewport)宽度)。如果是，您可以将 div 重新定位到齿轮图标的左侧而不是右侧。

这类似于工具提示库如何智能地根据元素与视口(viewport)边缘的接近程度向左、右、顶部或底部显示工具提示。