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

Question

我的网络应用程序包含动态构建的 Bootstrap 5 个可能非常大的下拉菜单。它们需要调整大小和重新定位以充分利用屏幕 space。所以我希望能够通过 javascript 控制或调整 Popper.js 计算的偏移量。但我还没有完成这项工作。 Popper.js 文档不是很清楚，我还没有在 Bootstrap 5 中找到有关如何执行此操作的任何文档或示例。（data-bs-offset 属性不合适，因为它不能调用一个函数来提供动态偏移值。）

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

我想使用 Bootstrap/Popper 计算出的 y 偏移量，但要调整 x 偏移量，使菜单打开时更靠近左边距，最好留下一个右边距而不是点击 window 的右侧。代码片段是一个简化的示例。在真实的应用程序中，下拉菜单内容的范围可以从小（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

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

How can I dynamically change the offset of a Bootstrap 5 dropdown menu using javascript or jQuery?

javascript

position

dropdown

popper.js

bootstrap-5