javascript - 如何使用 javascript 或 jQuery 动态更改 Bootstrap 5 下拉菜单的偏移量？

Question

我的 Web 应用程序包含动态构建的 Bootstrap 5 下拉菜单，该菜单可能非常大。需要调整它们的大小和位置，以充分利用屏幕空间。所以我希望能够通过 JavaScript 控制或调整由 Popper.js 计算的偏移量。但我还没有做到这一点。 Popper.js 文档不太清楚，我还没有找到任何文档或如何在 Bootstrap 5 中执行此操作的示例。(data-bs-offset 属性不合适，因为它无法调用函数来提供动态偏移值.)

请参阅 JSFiddle https://jsfiddle.net/Martin_ATS/cqw5mjLv/3/ 上的代码示例。我可以通过 bootstrap.Dropdown.getInstance() 访问下拉对象并通过 jQuery $(ddelem).dropdown() ，如hideDropdown()中所示功能。但尽管多次尝试调用setOptions()，我仍无法通过javascript更改偏移量。等等

我想使用 Bootstrap/Popper 的计算 y偏移，但调整x偏移量，以便菜单打开时更靠近左边距，并且理想情况下保留右边距，而不是碰到窗口的右侧。该代码片段是一个简化的示例。在真实的应用程序中，下拉菜单内容的范围可以从小(Bootstrap/Popper 的正常偏移工作正常)到非常大(包括水平或垂直滚动​​)。

谢谢!

Answer 1

获取 Popper 的实例(即 dd 实例中的 _popper)，然后设置 modifers 数组内的偏移量...

        var dd = bootstrap.Dropdown.getInstance(evt.relatedTarget);
        console.log(`shown.bs.dropdown ${evt.relatedTarget.id}`);

        var $ddelem = $(evt.relatedTarget);
        dd._popper.setOptions( {modifiers: [
             {
                 name: 'offset',
                 options: {
                   // calculate and set the offset as needed here..
                   offset: [30, 10],
                 },
             },
        ]})

Demo